Babel7升级体验

前言

babel7有许多重大更新，有些是破坏性更新。更新前请仔细阅读更新说明。当前最新版本为7.9，建议更新到7.4之后的版本。

本文主要记录升级过程中遇到的问题。

解决polyfill问题
typescript编译成js
commonjs模块导入

更新依赖

由于仓库年代久远，依赖项很多，官方推荐的babel-upgrade效果并不好，直接手动管理

卸载旧依赖

yarn remove babel-core babel-jest babel-loader babel-plugin-add-react-displayname babel-plugin-import babel-plugin-lodash babel-plugin-styled-components babel-plugin-transform-decorators-legacy babel-plugin-transform-runtime babel-preset-env babel-preset-react babel-preset-stage-0 ts-import-plugin ts-loader tslint typescript

安装babel 安装babel、presset、plugin

yarn add --dev babel-loader @babel/core
yarn add --dev @babel/preset-env @babel/preset-react @babel/preset-typescript
yarn add --dev @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties @babel/plugin-proposal-export-default-from @babel/plugin-transform-modules-commonjs  babel-plugin-import babel-plugin-transform-imports tsconfig-paths-webpack-plugin babel-plugin-transform-runtime

polyfill

有两种方式@babel/preset-env与@babel/plugin-transform-runtime，请自行比较两者差异本文使用preset-env与corejs结合

安装corejs依赖

yarn add core-js@3

preset-env配置如下

[
    "@babel/preset-env",
    {
        "useBuiltIns": "usage",
        "corejs": 3,
        "targets": {
            "browsers": ["Android >= 7.0", "ios >= 9"]
        }
    }
]

执行yarn start 报错

ERROR in ./node_modules/babel-runtime/core-js/symbol/iterator.js Module not found: Error: Can't resolve 'core-js/library/fn/symbol/iterator'

此外set-prototype-of get-prototype-of get-own-property-descriptor等文件也缺失

实际上我已经引入的corejs，但是还是报找不到。错误信息中一行 @ ./node_modules/antd-mobile/es/index.js,表示由antd import corejs文件报错。这个问题是由于webpack resolve配置导致的。改成以下配置报错消失。

 resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
    modules: ['/node_modules'],
    alias: []
}

preset-typescript

ts官方和babel推出的工具替代ts-loader，减少转换步骤ts->js。原来的转换需要经过ts-loader到babel-loader，现在只需babel-loader

语法补充

装饰器和类属性 @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties 这两个plugin在编译时如果没有安装都会有提示。安装即可，注意babel plugin顺序
export default from 'Foo'和 import commonjs模块个人不太推荐export default from 写法。@babel/plugin-proposal-export-default-from可以解决

旧的业务代码里有module.exports 的写法，引入@babel/plugin-transform-modules-commonjs处理commonjs import

按需加载

plugins配置

[
    "import",
    {
        "libraryName": "antd-mobile",
        "style": true
    }
],
[
    "transform-imports",
    {
        "lodash": {
            "transform": "lodash/${member}"
        }
    }
],

如果过程中有其他奇怪的报错，可尝试删除node_modules，特别是使用了HardSourceWebpackPlugin，注意删掉缓存。