为了使用ECMAScript 2020的新语法,升级@typescript插件的版本(@3.4.3 升级到@4.0.3),不晓得之前的版本是否也能支持新语法,可能没有配置相关的babel插件的原因;
关键原因:项目之前是只用babel-runtime,因为升级了Babel 7所以transform-runtime插件需要换成Babel 7的插件:"@babel/plugin-transform-runtime": "^7.12.1",注意是带前缀的,跟Babel 7之前版本不一样!!!
升级了@babel的版本到7,还有其他的@babel的插件:
"@babel/core": "^7.12.3",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-proposal-object-rest-spread": "^7.9.6",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/preset-env": "^7.9.6",
"@babel/preset-react": "^7.9.4",
"@babel/preset-typescript": "^7.9.0",
"@babel/runtime": "^7.9.6",
"babel-loader": "^8.1.0"
之后配置.babelrc,配置如下:
presets: [
[
'@babel/preset-env',
{
targets: {
chrome: '58',
ie: '11',
},
},
],
'@babel/preset-react',
'@babel/preset-typescript',
],
plugins: [
'@babel/plugin-syntax-dynamic-import',
'@babel/proposal-class-properties',
'@babel/proposal-object-rest-spread',
],
};
启动服务,第一次报错regeneratorRuntime is not defined
,查原因是:项目中使用 async await处理并行多个异步,是因为项目中没有使用transform-runtime
将es6+转换成es5;
看解决方案是要配置transform-runtime,参考腾讯云-balel-transform-runtime
Babel 使用了非常小的 helpers 来实现诸如
_extend
等常用功能。默认情况下,它将被添加到每个通过 require 引用它的文件中。这种重复(操作)有时是不必要的,特别是当你的应用程序被拆分为多个文件时。这时则需要使用
transform-runtime
:所有的 helper 都会引用模块babel-runtime
,以避免编译输出的重复问题。这个运行时会被编译到你的构建版本当中。这个转译器的另外一个目的就是为你的代码创建一个沙盒环境。如果你使用了 babel-polyfill,它提供了诸如
Promise
,Set
以及Map
之类的内置插件,这些将污染全局作用域。虽然这对于应用程序或命令行工具来说可能是好事,但如果你的代码打算发布为供其他人使用的库,或你无法完全控制代码运行的环境,则会成为问题。转译器将这些内置插件起了别名
core-js
,这样你就可以无缝的使用它们,并且无需使用 polyfill。
文档给出的Usage是:
于是:下载后报错this.setDynamic is not a function
,具体原因上面引言已经给出;