在 2 月 20 号 ECMAScript 第六版就正式推出了,这门语言一直保持稳定快速的发展而且新功能也在慢慢被现在主流的 JavaScript 引擎所接受。不过要想在浏览器端或者 Node 端直接运行 ES6 代码还得等上一些日子。幸好 TC39 (负责研究开发 EMCAScript 规格的组织) 做了大量工作让我们现在可以使用 ES6 中的大部分特性了。

代码转换

能够实现 ES6 到 ES5 的代码转换多亏了 Babel (以前叫 6to5) 以及 Traceur 之类的项目。这些转换器 (更准确地说是源代码到源代码的编译器) 可以把你写的符合 ECMAScript 6 标准的代码完美地转换为 ECMAScript 5 标准的代码,并且可以确保良好地运行在所有主流 JavaScript 引擎中。

我们这里目前在使用 Babel,主要是因为它对 ES6 的支持程度比其它同类更高,而且 Babel 拥有完善的文档和一个很棒的在线交互式编程环境

起步

在用 ES6 标准开始一个新项目的时候我们会建立一个目录结构来确保用 ES6 编写的代码能和编译出的 ES5 代码区分开。原始的 ES6 代码我们放在 src 目录下,而编译好的文件就是 lib 目录。这样的命名我们会在本文一直使用。(补充一点,lib 目录应该被加入 .gitignore 文件中)

安装 Babel

如果你还没安装 Babel 可以使用 npm 来安装:

npm install -g babel

Babel 一旦安装完成就可以开始编译你的 ES6 代码了。再确认一遍你已经在 src 目录放入了一些 ES6 文件,下面的命令将会把这个目录下所有 .es6, .es 和 .js 后缀的文件编译成符合 ES5 规范的代码到 lib 目录下:

babel -d lib/ src/

如果你想在文件有改动的时候自动完成这些编译工作可以使用这些常用的 JavaScript 构建工具:Grunt, GulpBrocolli.

给 ES6 标准库一个”腻子”

Babel 作为一个源到源的编译器不可能呈现所有 ES6 标准库中的新特性,例如 Map 和 Set 构造器和 Array 下的一些新方法。要使用这些我们需要一个”腻子”来填补这些不足。现在有很多 ES6 的腻子比如 core-js,它适用与 Node, io.js 和浏览器。

译者注: 本节原始标题为 Polyfilling the standard library,术语 polyfill 来自于一个家装产品Polyfilla:

Polyfilla 是一个英国产品,在美国称之为 Spackling Paste (刮墙的,在中国称为腻子)。记住这一点就行: 把旧的浏览器想象成为一面有了裂缝的墙.这些 polyfill 会帮助我们把这面墙的裂缝抹平,还我们一个更好的光滑的墙壁 (浏览器)

编写 ES6 代码

现在构建 ES6 代码的工具已经备齐了那我们就开始真正有趣的部分。我们不会过多着眼于某个新特性,如果你有需要可以阅读 Luke Hobanfeature list.

我们先在 src 目录下创建一个叫 person.es6 的文件:

import 'core-js/shim';

export default class Person {

  constructor( name ) {
this.name = name;
} sayHello() {
return `Hello ${ this.name }!`;
} sayHelloThreeTimes() {
let hello = this.sayHello();
return `${ hello } `.repeat(3);
}
}

在这个很简单的例子中我们用了数个需要 Babel 来解决兼容性的语法,还有一个新的方法 String#repeat 须要由 core-js 处理。你可以用本文开头给出的 Babel 命令行代码或者用 REPL 得到运行结果。

发布到 npm

目前为止我们可以编写、编译和运行 ES6 代码,不过你也许还想把你的代码发布到 npm 上。你显然不能直接发布然后期望每个人都来自己编译一次。

幸好,npm 允许你在发布前用 prepublish script 选项来修改,这个特性在 CoffeeScript 项目中已经被广泛使用了。

现在把 package.json 文件加入到项目根目录中:

{
"name": "person",
"version": "0.1.0",
"scripts": {
"compile": "babel -d lib/ src/",
"prepublish": "npm run compile"
},
"main": "lib/person.js",
"dependencies": {
"core-js": "^0.6.0"
},
"devDependencies": {
"babel": "^4.6.0"
}
}

注意这个 compile script 会直接运行你在右边提供 Babel 命令,这样你就可以直接运行 npm run compile 来编译而不需要键入文件目录了,而 prepublish script 会在你每次执行 npm publish 的时候自动运行。

还有就是为什么 Babel 会被加入 development dependencies 中,这样如果有人想参与这个项目就不用全局安装 Babel 了,npm 会把你项目下包含可执行文件的 node_modules 目录加入到系统环境变量 path 中。

.npmignore 文件

最后你需要确保发布的是编译出的文件而不是原始的 ES6 文件。如果你的项目根目录有 .gitignore 而没有 .npmignore 那 npm 就会自动忽略你项目中包含在 .gitignore 里所有的 文件和目录。添加 .npmignore 这样你发布的包里就是编译好的文件:

src/

总结

编写 ES6 代码并使用源到源的编译器如 Babel 或者 Traceur 来转换成标准 ES5 代码 使用 ES6 标准库腻子如 core-js 记得在发布到 npm 的时候添加 .npmignore 文件 你可以在我们的 update-couch-designs 项目中看到一个完整的例子,这个项目是我们用于更新和新建 CouchDB 设计文档的简单脚本。

原文:懂香—《现在开始使用 ES6》 翻译自 Using ES6 with npm today

(转)Babel-现在开始使用 ES6的更多相关文章

  1. Babel 转码器 § es6转换es5

    Babel 转码器 § es6转换es5 实时转码 /  Repl  -babel-node / babel-register(自动转码引入babel-register模块) 配置文件.babelrc ...

  2. webstorm配置babel自动转译es6的方法

    1.npm安装babel npm install -g babel-cli 2.npm安装Babel的preset npm install --save-dev babel-preset-es2015 ...

  3. Babel下的ES6兼容性与规范

    前端开发 Babel下的ES6兼容性与规范   ES6标准发布后,前端人员也开发渐渐了解到了es6,但是由于兼容性的问题,仍然没有得到广泛的推广,不过业界也用了一些折中性的方案来解决兼容性和开发体系问 ...

  4. ES6转ES5:Gulp+Babel

    目标: ES6代码转成ES5 对转换后的ES5进行压缩 以上步骤自动监控执行 步骤: 1.安装插件 在命令行中定位到项目根目录 安装全局 Gulp npm install -g gulp 安装项目中使 ...

  5. Sublime Text 之运行 ES6 (基于babel)

    本文同步自我的个人博客:http://www.52cik.com/2015/10/21/sublime-text-run-es6.html 之前在博客园里写过一篇<Sublime Text 之运 ...

  6. webpack4与babel配合使es6代码可运行于低版本浏览器

    使用es6+新语法编写代码,可是不能运行于低版本浏览器,需要将语法转换成es5的.那就借助babel7转换,再加上webpack打包,实现代码的转换. 转换包括两部分:语法和API let.const ...

  7. ES6标准简介之Babel转码器解说

    ES6是ECMAScript 6的简称,是JavaScript语言的下一代标准,现在基于jquery库的前端开发js所使用的标准是ES5(ECMAScript 5).ES6已于2015年6月正式发布. ...

  8. 向ES6看齐,用更好的JavaScript(一)

    众所周知,JavaScript作为弱类型语言,一直是精华与糟粕共存,许多"诡异"的地方我们不得不接受并使用.其实ES6(又称ECMAScript 2015)在2015年6月就已经正 ...

  9. Babel 学习

    一,为了更明白地使用Babel, 先了解Babel 的发展过程. 现在Babel的版本是6, 相对于以前的版本, 它做了重大更新: 1, 模块化:所有的内部组件都变成了单独的包.打开Babel在Git ...

  10. 为什么说Babel将推动JavaScript的发展

    Babel是一个转换编译器,它能将ES6转换成可以在浏览器中运行的代码.Babel由来自澳大利亚的开发者Sebastian McKenzie创建.他的目标是使Babel可以处理ES6的所有新语法,并为 ...

随机推荐

  1. 188. Best Time to Buy and Sell Stock IV leetcode解题笔记

    Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...

  2. c# Exception 异常信息归整

    private string ErrorMessage(Exception exception) { StringBuilder stringBuilder = new StringBuilder() ...

  3. 浅谈SDN和NFV之间的关系

    一个行业固定设备的折旧周期很长,任何变革的发生都绝非易事,但是网络却一次性面临两项革新--软件定义网络(SDN)和网络功能虚拟化(NFV),在变革网络的过程中,二者若想取得成功可能会依赖彼此的技术,或 ...

  4. DOCTYPE的详细图解

    之前有一次写代码的时候忘记写了<!DOCTYPE html> 导致样式的效果一直有点问题,查了很久才发现时候这个的锅.之后自己详细的来查找了DOCTYPE的作用. 在目前,基本上都是采用浏 ...

  5. IIS配置excel 权限

    http://www.cnblogs.com/zhuxiaohui/archive/2013/10/16/3371637.html

  6. jquery双击事件

    <html> <head><meta http-equiv="Content-Type" content="text/html; chars ...

  7. Oracle sys和system用户、sysdba 和sysoper系统权限、sysdba和dba角色的区别

    sys和system用户区别 1)最重要的区别,存储的数据的重要性不同 sys所有oracle的数据字典的基表和视图都存放在sys用户中,这些基表和视图对于oracle的运行是至关重要的,由数据库自己 ...

  8. android的单击监听事件

    Button button = (Button) findViewById(R.id.button1); //1.直接new出来 button.setOnClickListener(new View. ...

  9. XML解析、使用TreeView呈现效果

    首先用到TXMLDocument控件: Memo来显示XML文件, TreeView来呈现元素: 源代码: Procedure TForm2.Button1Click(Sender: TObject) ...

  10. XML增、删、改

    今天有个需求需要操作xml节点.突然见遗忘了许多.上网看了些资料.才整出来.脑袋真不够用.在这里把我找到的资料共享一下.方便以后使用.本文属于网摘/ 一.简单介绍 using System.Xml; ...