babel的.babelrc配置

Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。Babel 内部所使用的语法解析器是 Babylon

一个基本的.babelrc配置:

1
2
3
4
5
6
7
{
"presets": [
"env",
"stage-0"
],
"plugins": ["transform-runtime"]
}

presets env

presets 是babel的一个预设,使用的时候需要安装对应的插件,对应babel-preset-xxx,例如下面的配置,需要npm install babel-preset-env

每年每个 preset 只编译当年批准的内容。 而 babel-preset-env 相当于 es2015 ,es2016 ,es2017 及最新版本。

1
2
3
{
"presets": ["env"]
}

presets stage

stage 代表着ES提案的各个阶段,一共有5个阶段,存在依赖关系。也就是说stage-1是包括stage-0的,以此类推:

  • Stage 0 - 稻草人: 只是一个想法,可能是 babel 插件。
  • Stage 1 - 提案: 初步尝试。
  • Stage 2 - 初稿: 完成初步规范。
  • Stage 3 - 候选: 完成规范和浏览器初步实现。
  • Stage 4 - 完成: 将被添加到下一年度发布。

plugins

presets,是plugins的预设,起到方便设置的作用。如果不采用presets,可以使用plugins

1
2
3
4
5
6
7
8
9
10
11
12
13
{
"plugins": ["transform-es2015-arrow-functions"] // 也可以预设babel-preset-es2015
}
```

### 自定义预设和插件
3种方式设置都ok

```javascript
"plugins": ["babel-plugin-myPlugin"]
"plugins": ["myPlugin"]
"plugins": ["./node_modules/asdf/plugin"]。
// presets同理。

plugins/presets排序

  • plugins 会运行在 presets 之前。
  • plugins 会从第一个开始顺序执行。
  • presets 的顺序则刚好相反(从最后一个逆序执行)。

babel-polyfill

babel本身只提供预发的转换,当我们使用一些箭头函数这样的新的语法,其实在babel看来,更像是一种语法糖。 但是babel不能转义一些ES6、ES7…的新的全局属性,例如 Promise 、新的原生方法如 String.padStart (left-pad) 等。 这个时候我们就需要使用babel-polyfill。

本文结束感谢您的阅读

本文标题:babel的.babelrc配置

文章作者:陈宇(cosyer)

发布时间:2018年10月29日 - 17:10

最后更新:2020年07月22日 - 21:07

原始链接:http://mydearest.cn/babel%E7%9A%84.babelrc%E9%85%8D%E7%BD%AE.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

坚持原创技术分享,您的支持将鼓励我继续创作!