本文对比了webpack与rollup在打包组件库时的差异，并详细演示了如何配置两者进行构建。通过修改package.json字段、编写配置文件，最终使用npm命令完成组件库的打包、版本更新及发布到npm仓库的全过程。
前言
此前开发了一个loading样式组件，旨在提升代码复用率。经过多次打包与发布迭代，该组件已在npm上发布至2.7.0版本。尽管仍有部分细节待优化，但目前已具备可用性。
webpack和rollup对比
webpack是目前前端开发者使用最广泛的打包工具，面试中常涉及其相关问题；相比之下，rollup的提及频率较低。这种现象部分源于业界常见的观点：应用开发倾向于使用webpack，而库开发则偏好rollup。
尽管两种工具均具备强大的插件扩展能力，功能界限日益模糊，但rollup的配置更为简洁，且能生成体积更小的文件。对于前端应用而言，性能分析通常要求更小的库体积，因此rollup更契合组件库的开发需求。
本次实践旨在通过实验对比，分别使用webpack和rollool对同一项目执行打包操作。
使用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的文件名
})
],
}
通常应区分开发与生产环境配置，但此处仅展示生产环境下的配置方案。
使用rollup打包
在rollup的配置中，使用的依赖库相对较多。
// rollup.config.js
// 解决rollup无法识别commonjs的问题
import commonjs from 'rollup-plugin-commonjs'
// babel处理es6代码的转换
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(),
],
}
发包到npm
将组件发布至npm仓库仅需执行少量命令。
npm pack项目打包完成后，命令行将输出压缩包的详细信息。
更新版本
npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease [--preid=<prerelease-id>] | from-git]
根据本次改动的幅度，选择相应的命令来更新版本号。
最后执行发布命令。
npm publish随后会收到通知邮件，确认包已成功发布。
至此，关于使用webpack和rollup打包组件库的方法介绍完毕。如需了解更多相关内容，可搜索本站过往文章或继续浏览后续文章，感谢大家的支持！