前言
项目是由AngularJS1.5 + webpack4 + babel6搭建的，现准备升级babel至babel7
开始升级
1、全局安装babel-upgrade，方便其他项目升级babel（已经安装过的可以省略该步骤）
npm install babel-upgrade -g
2、使用以下命令检查需要升级的文件和相关插件（package.json、.babelrc）
npx babel-upgrade
下图为该命令展示的两个文件修改的内容对比，我们能大体知道将要更新的插件有哪些，做到心中有数。
3、上述命令只是展示了将要更新的内容，但没有真实的修改文件，现我们执行以下命令修改2个文件
npx babel-upgrade --write
查看修改结果：
通过命令升级并没有很完善的修改.babelrc文件，我们可以根据自身需要手动修改相关内容，满足项目需求
4、通过babel-upgrade 命令修改了相关文件，但并没有安装这些插件，我们需要执行以下命令安装这些插件
npm install 或者 yarn
5、构建本地环境，发现报以下错误
解决方案是，卸载 ng-annotate-loader， 安装 babel-plugin-angularjs-annotate
npm uninstall ng-annotate-loader -D
npm install babel-plugin-angularjs-annotate -D
修改.babelrc文件和webpack.json文件
(1) .babelrc文件
{
"presets": [
"@babel/preset-env"
],
"plugins": [
"angularjs-annotate",
[
"@babel/plugin-transform-runtime",
{
"corejs": 2
}
]
]
}
(2)webpack.json文件
···
{
test: /(\.es6|\.js)$/,
exclude: /(node_modules|bower_components\.js)/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
]
},
···
6、继续执行本地构建，发现已经构建成功了，运行本地环境，检查页面是否能正常显示,，发现报以下错误
导致这个错误的原因是在项目中混淆使用import和module.exports，babel7提供了相关插件进行统一转换，该插件将ECMAScript模块转换为CommonJS。
npm install --save-dev @babel/plugin-transform-modules-commonjs
.babelrc
{
"presets": [
"@babel/preset-env"
],
"plugins": [
"angularjs-annotate",
[
"@babel/plugin-transform-modules-commonjs",
{
"allowTopLevelThis": true
}
],
[
"@babel/plugin-transform-runtime",
{
"corejs": 2
}
]
]
}
再次构建运行本地环境已能正常运行了。
总结：
bable升级过程中，总会遇到各式各样的问题，这时候我们需要充分发挥我们的搜索能力，逐个解决相关错误。
参考文档：
