Babel 踩坑总结(一) —— 6.X 版本配置及概念理解

Babel 专栏收录该内容
2 篇文章 0 订阅

今天闲来无事试着从头构建一个前端项目,光 babel 就遇到不少问题,尤其是在 babel 升级到 7.X 版本之后,许多之前的配置都要发生一些变化,在这里做一个踩坑总结

1. 6.X 版本配置方法

npm install babel-loader@7 babel-core babel-preset-react babel-preset-env babel-preset-stage-0 -D

下面是这些包的作用:

这里我指定了 babel-loader 的版本,因为不指定版本,babel-loader 会下载 8.X 版本,会报 babel 版本的问题,如下图(虽然我们已经下载了最新的,后面我会介绍 7.X 如何升级)

在这里插入图片描述

然后是原来的 .babelrc 文件的配置

{
  "presets": [
    "env",
    "react",
    "stage-0"
  ]
}

2. presets(预设) 与 plugins(插件) 差别

举个例子, babel-preset-es2015 包含了 transform-es2015-arrow-functions(编译箭头函数)、transform-es2015-block-scoping(编译 const、let)、transform-es2015-classes(编译class)等几十个插件

如果不使用 preset,如果想要用完整的 es6 语法,使用者可能需要自己配置几十个 plugins

3. plugins、presets 的编译顺序

plugins、presets 的编译也许会有相同的功能或者有联系的功能,babel 是根据一定的顺序进行编译

  • plugins 优先于 presets 编译
  • plugins 根据配置数组升序(自左向右)顺序进行编译
  • presets 根据配置数组降序(自右向左)顺序进行编译

4. 一个很重要的问题

使用 babel 有一个非常需要注意的点,babel 只是转译新标准(es6、es7)引入的新语法,比如 ES6 的箭头函数转换为 ES5 的函数、ES6 的 letconst 的转换还有 React 的 JSX 语法等等。

不过对于Babel 默认只转换新的 JavaScript语法,而不转换新的 API 比如IteratorGeneratorSetMapsPromise 等等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转译

不做特别的处理,可能会造成下面的错误(这是我使用 *、yield 的ES6语法时报的错误 )

在这里插入图片描述

新标准引入的新的原生对象、部分原生对象新增的原型方法,babel是不会转译的,需要额外进行处理

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 撸撸猫 设计师:马嘣嘣 返回首页

打赏

zwkkkk1

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值