使用 rollup 打包 react 库
本文最后更新于:2020年12月13日 晚上
场景
其实一般用 tsc 编译一下就行了,但如果想要更加强大的功能,例如打包成一个单文件、多种格式、或者包含 css 时,就需要使用 rollup 来处理了。
- 打包
- 处理 ts
- 处理 css
- 压缩
配置文件
package.json
{
"scripts": {
"pub": "yarn build && lerna bootstrap",
"build": "rollup -c rollup.config.js"
},
"devDependencies": {
"@types/react": "^16.9.48",
"moment": "^2.27.0",
"rollup": "^2.26.9",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-postcss": "^3.1.8",
"rollup-plugin-terser": "^7.0.1",
"rollup-plugin-typescript2": "^0.27.2",
"typescript": "3.8.2"
}
}
rollup.config.js
import babel from "rollup-plugin-babel";
import typescript from "rollup-plugin-typescript2";
import pkg from "./package.json";
import { terser } from "rollup-plugin-terser";
import postcss from "rollup-plugin-postcss";
import { resolve } from "path";
export default {
// 入口文件
input: resolve(__dirname, "./src/index.ts"),
output: {
// 打包名称
name: pkg.name,
exports: "named",
file: resolve(__dirname, "./dist/index.js"),
format: "es",
},
external: [
...Object.keys(pkg.dependencies || {}),
...Object.keys(pkg.peerDependencies || {}),
],
plugins: [
babel({
exclude: "node_modules/**",
}),
typescript({
typescript: require("typescript"),
}),
postcss({
sourceMap: true,
extract: true,
minimize: true,
}),
terser(), // minifies generated bundles
],
};
使用 rollup 打包 react 库
https://blog.rxliuli.com/p/fc4a5a2a2e8341c584d6e92060faf01f/