Bebal配置说明

最新推荐文章于 2024-09-23 09:42:46 发布

儒极

最新推荐文章于 2024-09-23 09:42:46 发布

阅读量1.3k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/u010998803/article/details/82706106

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文深入解析Babel的presets和plugins配置，阐述语法转译器和补丁转译器的作用及调用顺序，探讨不同阶段转译器的功能覆盖，以及特定插件如transform-runtime和babel-plugin-dynamic-import-node在开发环境下的应用。

摘要由CSDN通过智能技术生成

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"],
  "env": {
    "development":{
      "plugins": ["dynamic-import-node"]
    }
  }
}

1、presets配置语法转译器：

说明：语法转译器只负责转译js最新的语法，并不负责转译js新增的api和全局对象；调用顺序stage-2 => env；

转译器包：babel-preset-env，通过在.babelrc中配置env选项，可以让代码兼容不同版本的浏览器或者node。浏览器或者node已经支持的语法将不再转译了，不支持的才转译。（还有很多转译器的包，这里暂且不解释）

modules：false ，默认支持CommonJS规范

targets：制定兼容浏览器类型以及版本

stage-0：包含stage-1,2,3的功能

stage-1：覆盖了stage-2,stage-3的所有功能

stage-2：覆盖了stage-3的功能，并支持两个插件

支持增强代码可读性的插件

支持es6的解构赋值

stage-3：支持 async，await

2、plugins配置补丁转译器：

说明：补丁转译器负责转译js新增的api和全局对象；调用顺序transform-runtime=>transform-vue-jsx;

transform-runtime：babel-runtime，babel-polyfill 与之有近似的能力，但是为什么选择这哥们呢？ transform-runtime会自动polyfill es5不具备的新特性，即es6的API转换为es5；babel-runtime必须手动require；babel-polyfill直接改写全局prototype，方式比较暴力，容易污染全局变量，而且这个包很大。

3、babel-plugin-dynamic-import-node

热更新速度，开发环境通过babel将异步import()转化为同步require()来增加热更新速度，生产环境继续使用webpack的import机制。