脚本宝典收集整理的这篇文章主要介绍了Babel 快速入门,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
简介
Babel 是一个 JavaScript 编译器,可将我们代码中的 ES6 语法转换为 ES5 的语法,使我们的代码能在不支持 ES6 语法的环境中正常运行。配合一些插件,我们甚至能直接使用 ES6 标准的一些新特性,而无需等待各大浏览器的实现,也无需担忧兼容性。
快速体验
1. 安装依赖
新建 babel_test
文件夹,在命令行里进入该文件夹,并执行如下命令:
npm inIT -y # 生成 package.JSON 文件
npm i -D babel-cli babel-PReset-env
npm i -s babel-polyfill
-
babel-cli 是 Babel 内置的一个 CLI,可通过命令行操作来编译文件。这是一个可选的开发依赖包,在实际开发中可根据需求决定是否安装。
-
babel-preset-env 会根据我们配置的环境自动将该环境不支持的语法转换 ES5 的语法。
-
babel-polyfill 是一个相对完整的 ES6 环境,可以为代码的运行环境补充缺少的 API。这是一个可选的依赖包,但个人建议最好安装并引入到代码中,详解见下文。
在编写本文章时,上面依赖包的最新版本分别为 babel-cli 6.26.0、babel-preset-env 1.6.1、babel-polyfill 6.26.0,如果安装的版本不一致,可能会得到不一样的结果。
2. 配置 Babel
新建 .bablerc
文件,内容如下:
{
"presets": ["env"]
}
.bablerc
是 Babel 的默认配置文件,运行 Babel 时会自动读取该文件的配置。上面 .bablerc
文件配置的意思是对代码进行完全的转换。
3. 编写代码
新建 source.js
文件,内容如下:
// 这里的代码无任何意义,只用作示例
const sayHi = () => {
const str = 'Hello World!';
const arr = [...str];
alert(arr.join(''));
};
...
是 ES6 语法,详情可参考 http://es6.ruanyifeng.com/#docs/array
4. 编译
执行以下命令就可以把 source.js
的代码转换为 ES5 的语法,并把结果输出到 target.js
。
./node_modules/babel-cli/bin/babel.js source.js -o target.js
babel-cli 的详细命令可参考 https://babeljs.cn/docs/usage/cli/
target.js
的内容最终如下:
'use strict';
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (VAR i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.From(arr); } }
var sayHi = function sayHi() {
var str = 'Hello World!';
var arr = [].concat(_toConsumableArray(str));
alert(arr.join(''));
};
可以看到 Babel 在 target.js
添加了 _toConsumableArray
函数,并将 [...str]
替换成了 [].concat(_toConsumableArray(str))
。到这里我们已经成功的将代码中的 ES6 语法转换为 ES5 语法,Babel 的使用就是这么简单。
babel-polyfill
如果我们仔细查看上文中的 target.js
,会发现 Babel 添加的 _toConsumableArray
函数竟然使用了 ES6 的特性 Array.from
,也就是说我们使用 Babel 转换后代码里可能还会存在 ES6 的东西!这个问题可以参考 https://www.zhihu.com/question/49382420。
这里我们需要重点注意的是:
Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。—— 《ECMAScript 6入门》
为了确保转换后的代码能正常的运行,最好在代码之前引入 babel-polyfill(这是一个实现了部分 ES6 特性的包)。
<!-- 在 HTML 文件中先引入 babel-polyfill 再引入 target.js -->
<!-- src 属性里的 6.26.0 是本文章编写时 babel-polyfill 的最新稳定版本,你可能需要根据实际引入对应的版本 -->
<script src="https://cdn.bootcss.COM/babel-polyfill/6.26.0/polyfill.min.js"></script>
<script src="target.js"></script>
至此,我们可以放心的随意使用 ES6 的特性了。
优化
其实现代浏览器或多或少都实现了部分 ES6 标准,如 Chrome v64 甚至已实现了 97% 的功能。如果我们确定我们的代码只运行在 Chrome v64 ,那么像 source.js
中的箭头函数则无需转换,因为 Chrome v64 已经支持这样的语法了。同理我们也无需引入整个 babel-polyfill ,只需引入其中 Chrome v64 不支持的部分即可。
Babel 的强大之处在这里更能得到体现。当我们配置了代码的运行环境之后,Babel 会自动判断该环境对 ES6 的实现程度,然后只把源代码中该环境不支持的语法进行转换。如果我们在源代码中利用模块化的方式引入 babel-polyfill ,Babel 也会对其进行优化,只引入该环境尚未实现的模块。下面就让我们来体现一下这强大的功能。
修改配置文件 .babelrc
,内容如下:
{
"presets": [
[
"env",
{
"targets": { // 配置代码的运行环境
"chrome": 64
},
"useBuiltIns": @H_886_304@true // 开启对 babel-polyfill 的优化
}
]
]
}
修改source.js
,内容如下:
// 使用 ES6 的模块化标准引入 babel-polyfill
import 'babel-polyfill';
const sayHi = () => {
const str = 'Hello World!';
const arr = [...str];
alert(arr.join(''));
};
运行命令编译成功后,target.js
的内容如下:
'use strict';
require('core-js/modules/web.timers');
require('core-js/modules/web.immediate');
require('core-js/modules/web.dom.iterable');
const sayHi = () => {
const str = 'Hello World!';
const arr = [...str];
alert(arr.join(''));
};
可以看到,箭头函数和 ...str
都没有变化,因为 Chrome v64 已经支持这样的语法。import 'babel-polyfill'
则变成了用 CommonJS 的方式引入了三个小模块,这是 Babel 通过查询 compat-table 得知 Chrome v64 尚未实现的特性后添加的模块。
以上便是 Babel 的一些基本使用了。
最后说明一下:
- 模块化并不是 Babel 的工作,Babel 仅负责转换语法。Babel 输出的
target.js
使用了 CommonJS 的模块化规范,这还需要一些构建工具对其进一步编译才能在 Chrome v64 上运行。
- core-js 是真正实现了 ES6 特性的包,是 babel-polyfill 的依赖,babel-polyfill 对其进行了一些包装。
@H_84_406@参考
以上是脚本宝典为你收集整理的Babel 快速入门全部内容,希望文章能够帮你解决Babel 快速入门所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。