巴别塔
$ npm install babel-upgrade -g $ babel-upgrade --write
然后会发现package.json依赖包,自动给转换到了最新版。
Babel7新增了,这里我没有用到,所以还是选择使用文件。
最终配置如下babel.config.js
.babelrc
{ "presets": [ [ "@babel/env", { "targets": { "edge": "17", "firefox": "60", "chrome": "67", "safari": "11.1" }, "useBuiltIns": "usage" } ], [ "@babel/preset-react", ], ], "plugins": [ ["@babel/plugin-proposal-class-properties"], ["@babel/plugin-transform-runtime"], ["@babel/plugin-syntax-import-meta"], ["@babel/plugin-syntax-dynamic-import"], ["@babel/plugin-proposal-json-strings"], [ "import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css", } ], ] }
这里引入了,解决按需加载Ant
Ant
[ "import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css", } ],
Webpack配置如下
module: { rules: [ { test: /\.js|jsx$/, exclude: /(node_modules)/, loader: 'babel-loader', }, ], },
遇到的坑
无法识别语法,因为在文件中没有引入JSX
.babelrc
@babel/preset-react
完美升级 babel7