升级Babel 7之后的问题

791 阅读2分钟

为了使用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,它提供了诸如 PromiseSet 以及 Map 之类的内置插件,这些将污染全局作用域。虽然这对于应用程序或命令行工具来说可能是好事,但如果你的代码打算发布为供其他人使用的库,或你无法完全控制代码运行的环境,则会成为问题。

转译器将这些内置插件起了别名 core-js,这样你就可以无缝的使用它们,并且无需使用 polyfill。

文档给出的Usage是:

于是:下载后报错this.setDynamic is not a function,具体原因上面引言已经给出;