作者: OneAPM
查看: 1156|回复: 4

[教程] 【深入浅出 ES6】ES6 与 Babel - Broccoli 的联用

[复制链接]
OneAPM 发表于 2016-3-9 11:11:43 | 显示全部楼层 |阅读模式
查看: 1156|回复: 4
说明:
深入浅出 ES6指的是添加在 ECMASript 标准第六版中的 JavaScript 编程语言的新特性,简称为 ES6。
虽然 ES6 刚刚到来,但是人们已经开始谈论 ES7 了,它未来的样子,以及新标准能提供哪些光鲜亮丽的特性。作为网络开发者,我们想的则是如何将这些特性都用上。在之前的深入浅出 ES6 贴文中,我们曾多次鼓励读者朋友使用 ES6 在一些小工具的帮助下编写代码。并这样调戏你们:

如果你想在网络上使用这个新语法,你可以使用 Babel (一款 JS 编译器)或谷歌的 Traceur (一款编译器)将你的 ES6 代码翻译成网络友好型的 ES5。

今天,本文将向你展示详细的实现步骤。上面所提到的工具被称为转换编译器。转换编译器又被称为源到源的编译器 —— 将编程语言在同一个抽象层面进行转换的编译器。转换编译器使得我们在使用 ES6 编写代码的同时,保证代码在每一个浏览器中都能够运行。

一、我们的救星——转换编译器
转换编译器使用简便。两个步骤就能解释清楚:
1.用 ES6 语法写出代码。
let q = 99;let myVariable = `${q} bottles of beer on the wall, ${q} bottles of beer.`;
2.将上面的代码作为转换编译器的输入,编译器处理之后得到下面的输出:
"use strict";var q = 99;var myVariable = "" + q + " bottles of beer on the wall, " + q + " bottles of beer."
这是我们熟知的 JavaScript,它能够在任何浏览器中使用。
至于转换编译器内部如何转换代码及其复杂,远非这篇小文能够解释得了。这就像我们不知道内置引擎的工作原理,但是我们却能够很好地驾驶车辆。因此,我们也可以将转换编译器看做一个能够处理代码的黑盒子。

Babel登场
在一个具体的项目中,使用Babel有几种不同的方法。在工具中,有一种命令行工具,你能按照如下所示的格式发出命令:
babel script.js --out-file script-compiled.js
你也可以使用浏览器版本。只需要将 Babel 添加为常用 JS 库,然后将你的 ES6 代码放入「 text/babel」类型标签中。如下所示:
<script src="node_modules/babel-core/browser.js"></script><script type="text/babel">// Your ES6 code</script>
当你的代码库开始膨胀,你不得不将它们放在不同的文件和文件夹中时,这些方法都不会跟着膨胀。那时,你需要的是一个开发工具以及一个使用管道来整合Babel 的办法。
在接下来的内容中,我们会将 Babel 整合至开发工具,即 Broccoli.js,并书写和执行 ES6 代码例子。为了不让你感到迷惑,你可以在这里看到完整的源代码:broccoli-babel-实例。在那里你会找到三个项目实例:
1.es6-fruits
2.es6-website
3.es6-modules
每个实例都建立在前一个例子的基础之上。我们从最小最基础的步骤开始,然后发展成一个通用的方案(作为雄伟计划的第一步)。本文将会详细描述前两个实例。此后,你就能独立阅读和理解实例3中的代码了。
如果你现在的想法是 —— 我就坐等浏览器来支持新特性吧 —— 那你就会掉队。即使最终实现了完全兼容,也必须花费很长的时间。而转换编译器却一直在这儿;而且 ECMAScript 标准会按计划每年发布新版本。因此,我们将会看到的是在统一的浏览器平台出现之前新标准的不断涌现。不妨现在就加入我们开始使用这些新特性吧。

二、第一个 Broccoli & Babel 项目
Broccoli 是一个旨在实现项目开发的工具。通过使用 Broccoli 插件,你能够压缩合并、最小化文件等等。它节省了我们处理文件、目录以及每次项目改变后都要执行命令的时间。可以将它视为:

这就像是铁路管道资产,不过它在节点上运行而且与后端无关(backend-agnostic)。


1、项目设置
节点
你也许已经猜到了,你必须安装 Node0.11 或后继版本。
如果你的系统是 Unix,不要选择程序包管理器(如 apt,yum)安装。这是为了避免在安装时使用根管理权限。最好是在当前用户下使用上面提供的链接手动安装。你可以在 Do notsudo npm 了解为什么我们不推荐使用根权限。在那里你能找到其他的安装方法

Broccoli
我们首先使用下面的代码安装 Broccoli 项目:
mkdir es6-fruitscd es6-fruitsnpm init# Create an empty file called Brocfile.jstouch Brocfile.js
然后安装 broccoli 和 broccoli-cli
# the broccoli librarynpm install --save-dev broccoli# command line toolnpm install -g broccoli-cli写入 ES6 代码
新建 src 文件夹并放入文件 fruits.js
mkdir srcvim src/fruits.js
在这个新文件中用 ES6 语法敲一段代码。
let fruits = [  {id: 100, name: 'strawberry'},  {id: 101, name: 'grapefruit'},  {id: 102, name: 'plum'}];for (let fruit of fruits) {  let message = `ID: ${fruit.id} Name: ${fruit.name}`;  console.log(message);}console.log(`List total: ${fruits.length}`);
上面的代码样本使用了3个 ES6 的特性:
保存并尝试运行。
node src/fruits.js
现在还不能运行,但是马上我们将会使用节点(Node)让它在任何浏览器中都可以执行。
let fruits = [    ^^^^^^SyntaxError: Unexpected identifier

2、转换编译器时间
现在,我们将会使用 Broccoli 加载我们的代码并推向 Babel。编辑文件 Brocfile.js,加入这段代码:
// import the babel pluginvar babel = require('broccoli-babel-transpiler');// grab the source and transpile it in 1 stepfruits = babel('src'); // src/*.jsmodule.exports = fruits;
注意我们需要使用 broccoli-babel-transpiler,即一个封装了 Babel 库的 Broccoli 插件,因此我们必须安装:
npm install --save-dev broccoli-babel-transpiler
现在构建项目并执行代码:
broccoli build dist # compilenode dist/fruits.js # execute ES5
输出应该长这样:
ID: 100 Name: strawberryID: 101 Name: grapefruitID: 102 Name: plumList total: 3
这很简单嘛!你可以打开 dist/fruits.js,看一看转换的代码长啥样。Babel 转换编译器的一个不错的特性就是它能够得到可读的代码。
回复 论坛版权

使用道具 举报

乔克斯 发表于 2016-3-9 11:58:38 | 显示全部楼层
好像是那里复制过来的。。。完全意义不明。。不懂。。。
ingdear 发表于 2016-3-19 10:14:41 | 显示全部楼层
完全不知道是干啥的,应该是复制过来的。
hkxxlyzm 发表于 2018-2-11 16:12:07 | 显示全部楼层
学习学习学习学习学习学习学习
darker 发表于 2018-8-11 08:42:33 | 显示全部楼层
这是给我们看看,还是下载的??
您需要登录后才可以回帖 登录 | 加入CSkin论坛

本版积分规则

QQ|申请友链|小黑屋|手机版|Archiver|CSkin ( 粤ICP备13070794号

Powered by Discuz! X3.2  © 2001-2013 Comsenz Inc.  Designed by ARTERY.cn
GMT+8, 2019-11-14 10:13, Processed in 0.451965 second(s), 30 queries , Gzip On.

快速回复 返回顶部 返回列表