公司ui库适配antd4

因为 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——补丁版本