Rollup 高效打包组件库
九月 13, 2021
本文共计:
730 字
预计阅读时长:
3分钟
Rollup
Rollup
是什么,这里就不再过多的赘述了,具体详情见官网 : https://rollupjs.org/guide/zh/
Rollup
是自带scope hoisting
和 tree-shaking
的。
强烈建议:在使用之前认真阅读一遍官方文档
package.json 配置解读
参考:package.json官方 Docs : https://docs.npmjs.com/cli/v7/configuring-npm/package-json#main
核心解读1:module
、main
、types
、typing
main
程序主入口,如果没有设置,默认会在根目录查找
index.js
,通常给予CommonJS
去使用,例如require('xxxxx')
。module
程序主入口,虽然不成官方标准,但是正在趋向于主流,主要用于
es6
。types
&typings
如果打包的是
ts
代码,需要为你的包显式的指定type
的声明文件;
这两个字段没任何区别,是同义的,参考 : https://www.typescriptlang.org/docs/handbook/declaration-files/publishing.html
基础的配置文件
所需要用到的包
// babel
import babel from '@rollup/plugin-babel';
// typescript
import tsc from 'rollup-plugin-typescript2';
// resolve
import resolve from '@rollup/plugin-node-resolve';
// 处理 commonjs
import commonjs from '@rollup/plugin-commonjs';
// 处理图片
import image from '@rollup/plugin-image';
// 压缩代码
import { terser } from 'rollup-plugin-terser';
// 处理 json 文件
import json from '@rollup/plugin-json';
// 使rollup可以使用postCss处理样式文件less、css等,需要同时安装 postcss
import postcss from 'rollup-plugin-postcss';
// 处理 less 定义的变量
import simplevars from 'postcss-simple-vars';
// 处理less嵌套样式写法
import nested from 'postcss-nested';
rollup.config.js
const extensions = ['.ts', '.tsx', '.js', '.jsx'];
const external = ['react', 'antd', 'react/jsx-runtime']
export default {
input: './src/index.ts',
output: [
{
file: './lib/index.js',
sourcemap: true,
format: 'cjs',
esModule: false,
},
{
file: './es/index.js',
sourcemap: true,
format: 'esm',
},
],
external,
plugins: [
image(),
postcss({
plugins: [
simplevars(),
nested(),
],
// 内部使用 cssnano 去做压缩的,外部不需要再次安装
minimize: true,
// 处理.css和.less文件
extensions: [ '.css', '.less' ],
}),
// 帮助 rollup 查找 node_modules 里的三方模块
resolve({ extensions }),
// 帮助 rollup 查找 commonjs 规范的模块, 常配合 rollup-plugin-node-resolve 一起使用
commonjs(),
tsc({
tsconfig: './tsconfig.json',
}),
babel({
extensions,
babelHelpers: 'runtime',
exclude: /node_modules/,
}),
terser()
]
};
tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"jsx": "react-jsx",
"esModuleInterop": true,
"sourceMap": true,
"declaration": true,
"baseUrl": ".",
"outDir": ".",
"strict": true,
"allowSyntheticDefaultImports": true
},
"exclude": [
"node_modules",
"lib",
"es",
"dist",
"typings",
"**/__test__",
"test",
"docs",
"tests"
]
}
babel.config.js
module.exports = {
presets: [
['@babel/preset-env', { loose: true }],
[
'@babel/preset-react',
{
runtime: 'automatic',
},
],
],
plugins: [
'@babel/plugin-transform-runtime'
],
};
以上的配置基本就可以打造一个组件库了,麻雀虽小,五脏俱全。
FAQ
- 打包完,发现
antd
或者自生样式丢失?
module.exports = {
presets: [
['@babel/preset-env', { loose: true }],
[
'@babel/preset-react',
{
runtime: 'automatic',
},
],
],
plugins: [
'@babel/plugin-transform-runtime',
+ [
+ 'import', {
+ "libraryName": "antd",
+ "libraryDirectory": "es",
+ "style": "css"
+ }
+ ]
],
};
这里需要使用
babel
中的import
实现lazy
加载。
- 如果我打包完后,想实现类似于
antd
的懒加载样式,可以做到吗?
可以的,需要在
rollup.config.js
的postcss
配置中加入:extract
,单独输出样式文件,然后在项目中像加载antd
一样,配置babel
就可以了。
最后,我叫小王,花名书生,今日份知识分享到此over
,下一期再见~
查看评论