Babel 快速入门

NoraXie 发布于2019-08-22 14:57 / 1130人阅读

摘要：快速体验安装依赖新建文件夹，在命令行里进入该文件夹，并执行如下命令生成文件是内置的一个，可通过命令行操作来编译文件。入门为了确保转换后的代码能正常的运行，最好在代码之前引入这是一个实现了部分特性的包。参考中文网入门

简介

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 特性的包）。

至此，我们可以放心的随意使用 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": 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 对其进行了一些包装。

参考

Babel中文网

ECMAScript 6 入门

compat-table

browserslist

core-js

GPU云服务器云服务器前端快速入门云计算快速入门 css快速入门 html快速入门

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93027.html

Babel快速入门

摘要：首先，作为入门的话，的用户手册是个很不错的选择，里面基本覆盖了使用的各方面。所以下面主要是我学习的一些笔记，姑且当作是一篇入门吧。下面我们正式进入正题。这也是最常用的一个用法之一。有两个方式进行配置。首先，作为入门的话，Babel的用户手册是个很不错的选择，里面基本覆盖了Babel使用的各方面。所以下面主要是我学习Babel的一些笔记，姑且当作是一篇入门吧。 Babel是什么按照B...

notebin 2019-08-21 10:57 评论0 收藏0
es6快速入门

摘要：快速入门简介以下简称是语言的下一代标准，已经在年月正式发布了。而且声明后必须立即初始化赋值，不能后面赋值。方法默认返回实例对象即，可以指定返回另外一个对象。参数搭配的变量是一个数组，该变量将多余的参数放入数组中。 es6快速入门 showImg(https://segmentfault.com/img/remote/1460000008519223?w=560&h=314); ES6简...

liujs 2019-08-20 14:39 评论0 收藏0
项目中配置Babel转码器的详细教程

先简单说一下Babel吧 Babel是一个ES6转码器，可以将ES6代码转为ES5代码此篇教程是在学习阮老师的《ES6标准入门》时，不会npm的学习总结在阮老师的教程上具体补充，通过以下几个步骤，即可在项目中直接安装Babel转码器，一行命令即可进行ES6转码第一步：创建package.json package.json 文件是一个描述文件，主要有以下3个作用： 1.描述项目依赖了哪些包 2...

zzbo 2019-08-26 12:21 评论0 收藏0
库，组件，框架 - 收藏集 - 掘金

摘要：哈哈，我理解，架构就是骨架，如下图所示译年月个有趣的和库前端掘金我们创办的使命是让你及时的了解开发中最新最酷的趋势。翻译 | 上手 Webpack ? 这篇就够了！ - 掘金译者：小 boy （沪江前端开发工程师）本文原创，转载请注明作者及出处。原文地址：https://www.smashingmagazine.... JavaSrip... 读 Zepto 源码之代码结构 - ...

tommego 2019-08-20 16:33 评论0 收藏0
零React基础入门Amaze UI Touch！

摘要：全文的目的是达成使用进行项目开发，并且以我这个前端菜鸟所见所学来归纳整理。环境安装与前期准备我的基础环境出的开源的编辑器命令行工具，下一个炒鸡好用的神器。只提供组件，对配套技术不做限定，方便用户与现有技术栈快速整合，降低使用成本。全文的目的是达成使用amazeui-touch进行项目开发，并且以我这个前端菜鸟所见所学来归纳整理。文章不对详细内容做讲解。环境安装与前期准备我的基础环...

王晗 2019-08-21 10:57 评论0 收藏0