最近在写一些Vue和React相关的组件库，涉及到打包文件发布npm这一块，在对比了webpack和rollup两种打包工具之后，决定使用rollup来打包，在此总结一下，希望可以给其他人参考。如果嫌我啰嗦，可以直接看代码，😊。
Rollup
Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，常用于打包类库，其配置项也非常的简洁,跟webpack其实差不多，一个最基本的配置格式大体如下：
1
2
3
4
5
6
7
8
9
10
11
12
|
export default {
// 入口
input: "",
// 输出
output: [],
// 排除项
external: [],
// 全局模块
globals: {},
// 插件
plugins: [],
}
|
与webpack区别
Rollup
- 简洁的API，易上手;
- 天生的Tree-shaking，自动删除冗余代码;
- 支持多模块导出;
- 能快速打出体积更小的bundle;
- 适合打包类、库；
webpack
- 丰富的插件系统;
- 代码分割和静态资源导入;
- 热模块更新;
- 适合项目级应用;
React
react 打包配置如下，大家可以根据自己的项目稍微修改下即可。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
import resolve from 'rollup-plugin-node-resolve';
import postcss from 'rollup-plugin-postcss';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import typescript from '@rollup/plugin-typescript';
const extensions = ['.js', '.jsx', '.ts', '.tsx'];
export default {
input: 'src/components/index.tsx',
output: [
{
name: 'index',
format: 'es',
file: 'dist/lib/react.esm.js'
}, {
name: 'index',
format: 'umd',
file: 'dist/lib/react.js'
}
],
external: ['react', 'react-dom'],
globals: {
react: 'React',
"react-dom": "ReactDOM",
},
plugins: [
resolve({
mainFields: ['module', 'main', 'jsnext:main', 'browser'],
extensions
}),
babel({
exclude: '**/node_modules/**',
runtimeHelpers: true
}),
commonjs({
include: "node_modules/**"
}),
postcss({
extract: true,
extensions: ['.scss']
}),
typescript()
],
};
|
Vue
vue 打包如下。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
import esbuild from 'rollup-plugin-esbuild'
import vue from 'rollup-plugin-vue'
import scss from 'rollup-plugin-scss'
import dartSass from 'sass';
import { terser } from "rollup-plugin-terser"
export default {
input: 'src/lib/index.ts',
output: [{
globals: {
vue: 'Vue'
},
name: 'vue',
file: 'dist/lib/vue.js',
format: 'umd',
plugins: [terser()]
}, {
name: 'vue',
file: 'dist/lib/vue.esm.js',
format: 'es',
plugins: [terser()]
}],
plugins: [
scss({ include: /\.scss$/, sass: dartSass }),
esbuild({
include: /\.[jt]s$/,
minify: process.env.NODE_ENV === 'production',
target: 'es2015'
}),
vue({
include: /\.vue$/,
})
],
}
|
发布npm
修改或添加package.json一些选项
1
2
3
4
5
6
7
8
9
|
{
"name": "你的组件库名字",
"version": "组件库版本",
"files": [
"dist/lib/*"
],
"main": "dist/lib/bundle.js",
"module": "dist/lib/bundle.esm.js"
}
|
切换npm官方源
1
2
3
4
|
// 查看
npm config get registry
// 设置
npm config set registry https://registry.npm.taobao.org
|
发布
1
2
3
|
// 必须先登录
npm login
npm publish
|
注意
保证库的名字唯一
保证每次发布的版本号不一样