前言
之前做了一個loading的樣式組件，為了實現(xiàn)代碼的可重用性，將這個小項目打包并且發(fā)布在了npm上。在一次次的打包發(fā)包過程中經(jīng)歷了一個有一個報錯，@buzuosheng/loading這個組件已經(jīng)到了2.7.0版本，雖然還有一些要調(diào)整的地方，但總算是可以用了。
webpack和rollup對比
webpack算是使用程序員使用最多的打包工具，面試中往往會問到webpack的相關(guān)問題，而rollup被問到的要少很多。導致這種現(xiàn)象的一個原因是，應用開發(fā)使用webpack，庫開發(fā)使用rollup的說法。
但是兩個打包工具都有很強大的插件開發(fā)功能，功能差異越來越模糊，但是rollup使用起來更加簡潔，而且能打出能小體積的文件。但當我們做前端應用時，性能分析往往要求更小的庫，所以rollup更符合開發(fā)庫的要求。
這次算是一個打包的實驗，我們使用兩個工具都對這個項目打一次包。
使用webpack打包
在打包之前，需要給package.json文件中添加或更改一些字段。
{
// 程序主入口模塊，用戶引用的就是該模塊的導出
"main": "dist/bundle.js",
// 項目包含的文件
"files": [
"src",
"dist"
],
// 將react和react-dom移動到該配置中，兼容依賴
"peerDependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
}
webpack打包需要用到很多庫來處理不同的文件，這個項目比較小，就只用了兩個庫。
// webpack.config.js
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
mode: "production",
entry: "./src/Loading.jsx",
output: {
filename: "index.js",
path: path.join(__dirname, "./dist/"),
libraryTarget: "umd",
},
optimization: {
minimize: false,
},
resolve: {
extensions: [".jsx"]
},
module: {
rules: [
{
test: /.css$/,
loader: [MiniCssExtractPlugin.loader, "css-loader?modules"],
},
{
test: /.(js|jsx)$/,
loader: "babel-loader",
exclude: /node_modules/,
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "main.min.css" // 提取后的css的文件名
})
],
}
本來應該寫開發(fā)和生產(chǎn)兩個環(huán)境下的配置，但在這里只寫了production環(huán)境下的配置。
使用rollup打包
在rollup中使用的庫比較多一點。
// rollup.config.js
// 解決rollup無法識別commonjs的問題
import commonjs from "rollup-plugin-commonjs"
// babel處理es6代碼的轉(zhuǎn)換
import babel from "rollup-plugin-babel"
// resolve將我們編寫的源碼與依賴的第三方庫進行合并
import resolve from "rollup-plugin-node-resolve"
// postcss處理css文件
import postcss from "rollup-plugin-postcss"
export default {
input: "src/Loading.jsx",
// 打包一份cjs和一份es的文件
output: [
{
file: "dist/loading.es.js",
format: "es",
globals: {
react: "React",
},
}, {
file: "dist/loading.cjs",
format: "cjs",
globals: {
react: "React",
},
},
],
external: ["react"],
plugins: [
postcss(
{ extensions: [".css"] }
),
babel({
exclude: "node_modules/**",
runtimeHelpers: true,
}),
commonjs(),
resolve(),
],
}
發(fā)包到npm
發(fā)包到npm只需要幾個命令。
npm pack
對項目打包后，命令行輸出壓縮包的詳細信息。
更新版本
npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease [--preid=<prerelease-id>] | from-git]
根據(jù)本次改動的大小選擇不同的命令。
最后使用發(fā)布命令。
npm publish
然后就會收到郵件，你的包已經(jīng)發(fā)布成功。
到此這篇關(guān)于使用webpack和rollup打包組件庫的方法的文章就介紹到這了,更多相關(guān)webpack和rollup打包組件庫內(nèi)容請搜索服務器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務器之家！
原文鏈接：https://segmentfault.com/a/1190000039276597
