Babel学习笔记

#babel有什么用

ES6标准从ES2015制定开始已经有几个年头了,虽然各大浏览器最新版都在极力地实现标准,但并不是所有人都会用最新版本的浏览器,特别是天朝像某狗某游这样的二次包装的浏览器,使用别人的内核而且版本更新又比较慢,导致新标准不能及时地在浏览器端使用。

Babel就是用来解决这个问题的:将ES6的代码转换成ES5的代码,从而在现有的环境中运行,让我们能用下一代JS编写前端代码

1
2
3
4
5
6
7
// 箭头函数是ES6标准中制定的,大部分老版本浏览器都不支持
arr.map(item => item+1)

// babel转码后
arr.map(function(item){
return item+1;
})

想了解更多,来看看官网:https://babeljs.io/

#插件(plugins)与预设(presets)

参考:https://babeljs.io/docs/plugins/

babel6之后将默认的转换功能做成了可插拔的插件,默认不携带任何转换功能,如果没有指定插件,babel会原样输出,不会进行转换。

插件(plugins)只是单一的功能,例如:

  • es2015-arrow-functions
  • es2015-classes
  • es2015-for-of
  • es2015-spread

Babel官网列出ES2015的诸多特性

这么多插件一个一个地安装,明显很不合理,所以大部分情况下我们都是用presets(预设)

预设(presets)是一组插件,例如:

最新版babel中babel-preset-latest被弃用,推荐使用babel-preset-env

下面几个预设是TC39对ES的下一代提出的新功能的转换插件集合,这些功能还没有成为标准,有的功能甚至在将来会被移除,总之就是实验版预设(Experimental Presets)

TC39对EmacScript的提案详见:https://github.com/tc39/proposals

#在webpack构建系统中使用babel

用个babel有这么麻烦吗?光插件和预设就有这么多名堂。放心,我们不用管这些劳什子。

Babel官网提供了每一种环境下的配置文档:https://babeljs.io/docs/setup

Using Babel

注意:上面的In the browser是将babel转换工作放在浏览器端执行,转换工作会花费大量的时间,所以这种方式只适合开发环境(实际上开发环境我们基本也不用它),并不适用于生产环境。

我们实际开发大多使用构建系统帮我们做一些打包压缩的工作。

这里我以webpack为例介绍一下“如何在webpack中使用babel

实际上都是傻瓜教程,相当简单。

#1. 安装babel

1
npm install --save-dev babel-loader babel-core

#2. 在webpack中配置babel-loader

1
2
3
4
5
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
]
}

#3. 创建.babelrc配置文件

根据需要安装预设,比如这里安装presets-env预设

1
npm install babel-preset-env --save-dev

.bashrc中配置这些预设:

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

本作品采用 知识共享署名 4.0 国际许可协议 进行许可。

转载时请注明原文链接:https://blog.hufeifei.cn/2018/03/WebFront/babel%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/

鼓励一下
支付宝微信