背景
公司的前端组件库经过前端好几位大佬搞了个基于React、Ant design二次扩展的库，之前设想是每个业务模块基于公共的组件库维护各自的业务组件库，经过几个周期之后，发现已经不可控了，每个业务模块的Ant design版本不一样，而且各自基于公共又搞了一套自己的库，为了收紧口子跟后期的维护扩展，决定把公共库打包发布到npm私服，然后install到各自业务线，确保各业务线一致，这是背景
打包
在这之前有使用rollup打包的经验，这里也计划用rollup来实现，这过程中碰到了不少问题，查阅相关资料发现国内基于Rollup打包React的比较少，所以基于这次经验想整理下，以便后续查阅，过程中遇到的相关问题如下：
- 由于工程默认导出文件夹下的index.js文件，打包报错引入rollup-plugin-commonjs插件
- React组件的"<"解析报错，引入@babel/preset-react解决
- rollup.config.js plugins顺序不正确，先babel()再commjs()，不然commjs()打包报第2个错误
- class组件中的属性报错，引入@babel/plugin-proposal-class-properties解决
- class组件中的修饰符@打包报错，引入@babel/plugin-proposal-decorators解决，.babelrc 顺序必须在class-properties前
- 代码中使用的新特性解析报错，引入@babel/preset-env解决
- 使用rollup-plugin-less/rollup-plugin-less-modules打包出来引入的CSS文件不对，替换成rollup-plugin-postcss/rollup-plugin-less
启动
- 运行打包文件报错，引入babel @babel/plugin-transform-runtime解决
- 再运行，这个报错是因为 async/await 导致的，这个问题找了很久，最终在issues找到解决方案
第一个问题，回退到这个版本"@babel/plugin-transform-runtime": "7.1.0"/"@babel/runtime": "7.1.2"解决； 后面三个问题是ESLINT检查导致的，关闭ESLINT解决
- 之前整个库之间有相互的引用，导致打包之后生成的index.js里面还有import库下的引用与绝对路径的引用，导致运行时无法找到引用的文件报错，rollup认为yss-biz是一个依赖，但是运行时实际并不存在，最后引入rollup-plugin-includepaths把yss-biz别名转成相对路径
- uglif插件压缩报错，替换成rollup-plugin-terser解决
最后打包成功
- Unused external imports 这个问题是因为import了uglify但是没用，忽略
- Circular dependencies 因为历史原因，库中有使用yss-biz这个alias，后面通过rollup-plugin-includepaths重新定义这个别名的指向，最终出现循环引用，忽略
thishas been rewritten toundefined这是因为库中写的代码不正确用了箭头函数然后还绑定了this，忽略- Unused external imports 这个是因为导入的内容没有使用，忽略
配置
rollup.config.js
import commonjs from "rollup-plugin-commonjs";
import babel from "rollup-plugin-babel";
import postcss from "rollup-plugin-postcss";
import ascii from "rollup-plugin-ascii";
import resolve from "@rollup/plugin-node-resolve";
import includePaths from "rollup-plugin-includepaths";
import { terser } from "rollup-plugin-terser";
const externalAry = [
"antd",
"antd/es/locale/zh_CN",
"antd/dist/antd.css",
"moment",
"moment/locale/zh-cn",
"echarts",
"prop-types",
"snowflake-id",
"win-trade-base",
"@lugia/lugiax",
"@ant-design/icons",
"react",
"react-transition-group",
"react-dnd",
"react-dnd-html5-backend",
"react-loadable",
"react-resizable",
];
export default {
input: "yss-biz-base/index.js",
output: {
file: "dist/index.js",
format: "esm",
sourcemap: true,
},
plugins: [
resolve(),
includePaths({
include: { "yss-biz": "./yss-biz-base/index.js" },
}),
babel({ exclude: "**/node_modules/**", runtimeHelpers: true }),
commonjs(),
ascii(),
postcss({
// Extract CSS to the same location where JS file is generated but with .css extension.
extract: true,
// Use named exports alongside default export.
namedExports: true,
// Minimize CSS, boolean or options for cssnano.
minimize: true,
// Enable sourceMap.
sourceMap: true,
// This plugin will process files ending with these extensions and the extensions supported by custom loaders.
extensions: [".less", ".css"],
}),
terser(),
],
//不能使用正则匹配，有定制化组件也是以echarts命名
external: externalAry,
};
复制代码package.json
"dependencies": {
"@babel/core": "^7.10.0",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-proposal-decorators": "^7.10.0",
"@babel/plugin-syntax-jsx": "^7.8.3",
"@babel/plugin-transform-react-jsx": "^7.9.4",
"@babel/plugin-transform-runtime": "7.1.0",
"@babel/preset-env": "^7.10.0",
"@babel/preset-react": "^7.10.0",
"@babel/runtime": "7.1.2",
"@rollup/plugin-node-resolve": "^8.0.0",
"rollup": "^2.10.9",
"rollup-plugin-ascii": "^0.0.3",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-includepaths": "^0.2.3",
"rollup-plugin-less": "^1.1.2",
"rollup-plugin-postcss": "^3.1.1",
"rollup-plugin-terser": "^6.1.0"
},
"devDependencies": {
"colors": "^1.4.0",
"inquirer": "^7.1.0"
}
复制代码.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": [
"@babel/plugin-syntax-jsx",
["@babel/plugin-proposal-decorators", { "legacy": true }],
"@babel/plugin-proposal-class-properties",
"@babel/plugin-transform-react-jsx",
"@babel/plugin-transform-runtime"
]
}
复制代码发布
发布到npm私服部分网站资料比较多，按照步骤来基本就没什么问题了
资料
第一次记录写文章，文笔有限，多多包涵，ヾ(´ー`)ﾉ゛谢谢♪
