Babel-7-转码三-presetenv-transformruntime

21次阅读

共计 954 个字符,预计需要花费 3 分钟才能阅读完成。

@babel/preset-env + @babel/plugin-transform-runtime

@babel/preset-env + @babel/plugin-transform-runtime 搭配使用,可以完成基本语法转译 + ES 新语法的按需加载,这是配置 Babel 转码的第二种方式。

  1. 安装依赖包

    yarn add @babel/plugin-transform-runtime -D
    1. 如果配置参数 corejs 未设置或为 false,需安装依赖@babel/runtime(这部分代码会被抽离并打包到应用 js 里,所以可以安装在 dependencies 里),仅对 es6 语法转译,而不对新 API 转译。

      yarn add @babel/runtime
    2. 如果配置参数 corejs 设置为 2,需安装依赖@babel/runtime-corejs2(同上,推荐安装在 dependencies 里。),对语法、新 API 都转译。

      yarn add @babel/runtime-corejs2
    3. 推荐使用 corejs:2,但是,检测不到‘hello‘.includes(‘h‘) 这种句法,所以存在一定隐患,书写代码时需注意。
    4. @babel/runtime 和 @babel/runtime-corejs2 这两个库唯一的区别是:corejs2 这个库增加了对 core-js(用来对 ES6 各个语法 polyfill 的库)这个库的依赖,所以在 corejs 为 false 的情况下,只能做语法的转换,并不能 polyfill 任何新 API。
  2. .babelrc 文件写上配置

    {
      "presets": [
        [
          "@babel/preset-env",
          {"modules": false}
        ]
      ],
      "plugins": [
        [
          "@babel/plugin-transform-runtime",
          {"corejs": 2 // 推荐}
        ]
      ]
    }
  3. 配置参数

    1. corejs,默认值是 false,只对语法进行转换,不对新 API 进行处理;当设置为 2 的时候,需要安装@babel/runtime-corejs2,这时会对 api 进行处理。
    2. helpers,默认值是 true,用来开启是否使用 helper 函数来重写语法转换的函数。
    3. useESModules,默认值是 false,是否对文件使用 ES 的模块语法,使用 ES 的模块语法可以减少文件的大小。

正文完
 0