Table of Contents
因为 antd2 和 antd4 差异较大，公司的 ui 库一直没有升级适配。但因为以后新项目基本都会采用 umijs，为了开发便利，最好还是适配一下。因此，只能新建一个包，单独维护。
babel7 配置
之前的是 babel6，新的包采用了 babel7。babel7 里的包基本都改成了 @babel/plugin-name 的形式，.babelrc 的配置项也有区别。再加上 core-js 打包问题，折腾的大半天才弄出一份可以用的配置。
// babel7--package.json
"dependencies": {
"@babel/polyfill": "^7.12.1",
"@babel/runtime-corejs3": "^7.15.3",
},
"devDependencies": {
"@babel/cli": "^7.8.4",
"@babel/core": "^7.9.6",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-proposal-object-rest-spread": "^7.2.0",
"@babel/plugin-transform-runtime": "^7.15.0",
"@babel/preset-env": "^7.9.6",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.1.0",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-transform-remove-console": "^6.8.5",
},
"browerslist": {
"chrome": 58,
"ie": 11
},
// babel7--.babelrc
{
"presets": [["@babel/preset-env"], "@babel/react"],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-object-rest-spread",
"add-module-exports",
[
"@babel/plugin-transform-runtime",
{
"absoluteRuntime": false,
"corejs": 3
}
]
]
}
参考：
还有其他几个参考页面，但没记录。
适配 antd4
从包里用到的 antd 组件来看，antd2 和 antd4 差异最大的就是 Icon 组件的使用了。基本上把 Icon 全部替换成 antd4 的用法就可以了。
componentWillReceiveProps、componentWillUpdate 这些生命周期钩子需要加上 UNSAFE_ 前缀。
测试
- npm link 命令将当前包提取为全局包。
- 测试项目下通过 npm link package-name 设置包的软连接。
因为测试项目就在包的 demo 目录下，所以可以直接在测试项目目录下使用 npm link ../ 命令代替上面两步。但我这里报错了，所以还是使用的上面两步。
取消链接命令是 npm unlink 和 npm unlink package-name。
发布
为了将包发布到公司的 npm 组织里，包的名称需要是 @org-name/package-name 的形式。然后 npm adduser 添加 npm 账户用于发布。最后，npm publish –access public 发布即可。
git 打 tag 可以用 npm version xxx 命令方便地处理。其中 xxx 为：
- major——主版本
- minor——特性版本
- patch——补丁版本