前言
之前做了一個(gè)loading的樣式組件，為了實(shí)現(xiàn)代碼的可重用性，將這個(gè)小項(xiàng)目打包并且發(fā)布在了npm上。在一次次的打包發(fā)包過(guò)程中經(jīng)歷了一個(gè)有一個(gè)報(bào)錯(cuò)，@buzuosheng/loading這個(gè)組件已經(jīng)到了2.7.0版本，雖然還有一些要調(diào)整的地方，但總算是可以用了。
webpack和rollup對(duì)比
webpack算是使用程序員使用最多的打包工具，面試中往往會(huì)問(wèn)到webpack的相關(guān)問(wèn)題，而rollup被問(wèn)到的要少很多。導(dǎo)致這種現(xiàn)象的一個(gè)原因是，應(yīng)用開(kāi)發(fā)使用webpack，庫(kù)開(kāi)發(fā)使用rollup的說(shuō)法。
但是兩個(gè)打包工具都有很強(qiáng)大的插件開(kāi)發(fā)功能，功能差異越來(lái)越模糊，但是rollup使用起來(lái)更加簡(jiǎn)潔，而且能打出能小體積的文件。但當(dāng)我們做前端應(yīng)用時(shí)，性能分析往往要求更小的庫(kù)，所以rollup更符合開(kāi)發(fā)庫(kù)的要求。
這次算是一個(gè)打包的實(shí)驗(yàn)，我們使用兩個(gè)工具都對(duì)這個(gè)項(xiàng)目打一次包。
使用webpack打包
在打包之前，需要給package.json文件中添加或更改一些字段。
{
// 程序主入口模塊，用戶引用的就是該模塊的導(dǎo)出
"main": "dist/bundle.js",
// 項(xiàng)目包含的文件
"files": [
"src",
"dist"
],
// 將react和react-dom移動(dòng)到該配置中，兼容依賴
"peerDependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
}
webpack打包需要用到很多庫(kù)來(lái)處理不同的文件，這個(gè)項(xiàng)目比較小，就只用了兩個(gè)庫(kù)。
// 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的文件名
})
],
}
本來(lái)應(yīng)該寫(xiě)開(kāi)發(fā)和生產(chǎn)兩個(gè)環(huán)境下的配置，但在這里只寫(xiě)了production環(huán)境下的配置。
使用rollup打包
在rollup中使用的庫(kù)比較多一點(diǎn)。
// rollup.config.js
// 解決rollup無(wú)法識(shí)別commonjs的問(wèn)題
import commonjs from "rollup-plugin-commonjs"
// babel處理es6代碼的轉(zhuǎn)換
import babel from "rollup-plugin-babel"
// resolve將我們編寫(xiě)的源碼與依賴的第三方庫(kù)進(jìn)行合并
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只需要幾個(gè)命令。
npm pack
對(duì)項(xiàng)目打包后，命令行輸出壓縮包的詳細(xì)信息。
更新版本
npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease [--preid=<prerelease-id>] | from-git]
根據(jù)本次改動(dòng)的大小選擇不同的命令。
最后使用發(fā)布命令。
npm publish
然后就會(huì)收到郵件，你的包已經(jīng)發(fā)布成功。
到此這篇關(guān)于使用webpack和rollup打包組件庫(kù)的方法的文章就介紹到這了,更多相關(guān)webpack和rollup打包組件庫(kù)內(nèi)容請(qǐng)搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://segmentfault.com/a/1190000039276597
