(转)Babel-现在开始使用 ES6
在 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, Gulp 和 Brocolli.
给 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 Hoban 的 feature 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 设计文档的简单脚本。
(转)Babel-现在开始使用 ES6的更多相关文章
- Babel 转码器 § es6转换es5
Babel 转码器 § es6转换es5 实时转码 / Repl -babel-node / babel-register(自动转码引入babel-register模块) 配置文件.babelrc ...
- webstorm配置babel自动转译es6的方法
1.npm安装babel npm install -g babel-cli 2.npm安装Babel的preset npm install --save-dev babel-preset-es2015 ...
- Babel下的ES6兼容性与规范
前端开发 Babel下的ES6兼容性与规范 ES6标准发布后,前端人员也开发渐渐了解到了es6,但是由于兼容性的问题,仍然没有得到广泛的推广,不过业界也用了一些折中性的方案来解决兼容性和开发体系问 ...
- ES6转ES5:Gulp+Babel
目标: ES6代码转成ES5 对转换后的ES5进行压缩 以上步骤自动监控执行 步骤: 1.安装插件 在命令行中定位到项目根目录 安装全局 Gulp npm install -g gulp 安装项目中使 ...
- Sublime Text 之运行 ES6 (基于babel)
本文同步自我的个人博客:http://www.52cik.com/2015/10/21/sublime-text-run-es6.html 之前在博客园里写过一篇<Sublime Text 之运 ...
- webpack4与babel配合使es6代码可运行于低版本浏览器
使用es6+新语法编写代码,可是不能运行于低版本浏览器,需要将语法转换成es5的.那就借助babel7转换,再加上webpack打包,实现代码的转换. 转换包括两部分:语法和API let.const ...
- ES6标准简介之Babel转码器解说
ES6是ECMAScript 6的简称,是JavaScript语言的下一代标准,现在基于jquery库的前端开发js所使用的标准是ES5(ECMAScript 5).ES6已于2015年6月正式发布. ...
- 向ES6看齐,用更好的JavaScript(一)
众所周知,JavaScript作为弱类型语言,一直是精华与糟粕共存,许多"诡异"的地方我们不得不接受并使用.其实ES6(又称ECMAScript 2015)在2015年6月就已经正 ...
- Babel 学习
一,为了更明白地使用Babel, 先了解Babel 的发展过程. 现在Babel的版本是6, 相对于以前的版本, 它做了重大更新: 1, 模块化:所有的内部组件都变成了单独的包.打开Babel在Git ...
- 为什么说Babel将推动JavaScript的发展
Babel是一个转换编译器,它能将ES6转换成可以在浏览器中运行的代码.Babel由来自澳大利亚的开发者Sebastian McKenzie创建.他的目标是使Babel可以处理ES6的所有新语法,并为 ...
随机推荐
- Golang 文件服务器小结
花了一个星期学习文件服务器,老是在一些地方搞混,整理一下所学的,清晰了不少. 学Go半个月,还有很多不懂的地方,有理解错误的,还望高手指出. 注:以下代码中,w为http.ResponseWriter ...
- 理解soft-clipped reads
什么是soft-clipped reads 当基因组发生某一段的缺失,或转录组的剪接,在测序过程中,横跨缺失位点及剪接位点的reads回帖到基因组时,一条reads被切成两段,匹配到不同的区域,这样的 ...
- 三目运算符是不是在bug中躺了枪_折腾了一整天
Hand_result = !String.IsNullOrEmpty(e.ReadString) ? e.ReadString : GetHandCodeReadStringFromResultXm ...
- hibernate常用关联
<?xml version="1.0" encoding="utf-8" ?> <hibernate-mapping xmlns=" ...
- 搭建maven环境
有两种方式可以配置maven的环境配置,本人推荐使用第二种,即使用本地的maven安装文件,个人感觉这样可以方便管理下载jar包的存放位置,错误信息的输出等,可以在dos窗口中可以清晰看到,虽然比较麻 ...
- vue 2 滚动条加载更多数据实现
解析: 判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrollTop为滚动条在Y轴上的滚动距离. clientHeigh ...
- (Python)继承
面向对象的另一个特性是继承,继承可以更好的代码重用. 例如一个学校里面的成员有老师.学生.老师和学生都有共同的属性名字和年纪.但老师还有它自己的属性,如工资.学生也有它的属性,如成绩. 因此我们可以设 ...
- Mac 系统下的环境变量
1.查看电脑环境变量 -->echo $PATH 2. 新建环境变量 sudo vim ~/.bash_profile 输入密码 3. 按 I ,编辑新的环境变量地址,保存 退出 :w ...
- yii安装 /You don't have permission to access on this server
在安装yii的时候 ,当打开了init.bat进行配置的时候小黑本弹出了个小黑框立刻就关闭了, 进入cmd模式再打开init.bat就出现了"You don't have permissi ...
- 升级到iOS9之后的相关适配
iOS9AdaptationTips(iOS9开发学习交流群:458884057) iOS9适配系列教程[中文在页面下方]转自@iOS程序犭袁 (截至2015年9月26日共有10篇,后续还将持续更新. ...