本篇文章为大家展示了利用webpack和rollup怎么对组件库进行打包，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
webpack算是使用程序员使用最多的打包工具，面试中往往会问到webpack的相关问题，而rollup被问到的要少很多。导致这种现象的一个原因是，应用开发使用webpack，库开发使用rollup的说法。
但是两个打包工具都有很强大的插件开发功能，功能差异越来越模糊，但是rollup使用起来更加简洁，而且能打出能小体积的文件。但当我们做前端应用时，性能分析往往要求更小的库，所以rollup更符合开发库的要求。
这次算是一个打包的实验，我们使用两个工具都对这个项目打一次包。
在打包之前，需要给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的文件名
})
],
}本来应该写开发和生产两个环境下的配置，但在这里只写了production环境下的配置。
在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 pack对项目打包后，命令行输出压缩包的详细信息。
更新版本
npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease [--preid=<prerelease-id>] | from-git]根据本次改动的大小选择不同的命令。
最后使用发布命令。
npm publish
上述内容就是利用webpack和rollup怎么对组件库进行打包，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
