现在开始使用 ES6 – 简书

阅读详情 -> 现在开始使用 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 构建工具:GruntGulp 和 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 设计文档的简单脚本。

原文 现在开始使用 ES6

Categories: JavaScript

基于ES6,使用React、Webpack、Babel构建模块化JavaScript应用-CSDN.NET

阅读详情 -> 基于ES6,使用React、Webpack、Babel构建模块化JavaScript应用-CSDN.NET.

【编者按】本文为《Building modular javascript applications in ES6 with React, Webpack and Babel》的简译内容,讲述了作者基于ES6,使用React、Webpack、Babel构建模块化JavaScript应用的编程心得。

如果你想用React构建一个新的JavaScript应用,而且你还想实践ES6语法中的新特性,此外,你甚至想创建一些可重用组件并发布到NPM上,那么你究竟应该怎样实现这些需求?你如何将ES6代码发布到NPM,又如何在后续的项目中使用这些代码?我花了一些时间解决上面这些问题,现在我愿意与你们分享我习得的新知识。

如果你真的不希望阅读所有的细节,只想看看代码最终的效果——可以直接阅读最后一部分。

需求

我们先来搞清楚我们到底想要得到什么,应该如何去实现。

我们的主要目标是:基于ES6,使用我们自定义的React组件创建一个React应用。其中最棘手的部分是自定义React组件。以下是实现这些目标的需求列表:

  1. 自定义组件应该使用ES6编写;
  2. 自定义组件应该完全自给自足(使用方法足够简单:安装,导入,渲染);
  3. 自定义组件应该提供自身所需的样式(参考第2条,自给自足);
  4. 自定义组件应该通过NPM安装(因为bower有很多问题);
  5. 最后——所有自定义组件应该有单元测试和代码覆盖率报告;
  6. 加分项——自定义组件不应该相互依赖,但是应该能够相互影响。

此外,我们需要一些很棒的调试工具,例如:代码检查、源码映射(因为代码需要编译,所以这是调试的必要工具)。

处理需求

现在我们已了解所有需求,可以开始寻找满足这些需求的方法。所以,首先需要选定我们将使用的工具集和相关库。

编译

我们要基于ES6开发应用,目前的浏览器暂不完全支持所有新语法特性,所以我们需要将ES6编译为ES5。同时我们希望通过NPM管理自定义组件,需要选用一个兼容CommonJS的工具集。

目前有两种流行的可用选择——BrowserifyWebpack。二者都满足我们的大部分需求,考虑到我们的项目需要使用样式文件,而Webpack对非JavaScript文件(例如:样式文件、图片、字体文件)非常友好,所以最终我们将选用Webpack。

Webpack已经能够满足大部分需求,我们将在此基础上加入Gulp.js,帮助我们完成更多任务(例如:单元测试、代码覆盖率检测、静态资源伺服)。

使用ES6

现在我们已经知道如何使用Webpack和Gulp.js来构建代码,可是如何才能满足我们的第一个需求——使用ES6?我们可以使用转译器,帮助我们将ES6代码转译为主流浏览器支持的ES5代码。目前流行的转译器有:TraceurBabel.jsTypeScript(勉强算是),我们将选用Babel.js,它有一个更好的生态系统(插件、扩展等)。如果你尚不知晓其为何物,请记住这是一个非常棒的项目,我推荐你阅读它们的文档。最棒的是,Babel.js不仅支持ES6语法,它还可以编译JSX,所以我们可以在编译步骤彻底弃用标准React JSX编译器了!

如果你只想使用Babel.js,我推荐你阅读它们的使用文档。Axel Rauschmayer博士曾经撰写《教你使用Babel.js》一文,也值得一读,如果你对JavaScript感兴趣,我也极力推荐订阅他的博客。

自给自足

现在我们选定了ES6转译器,让我们讨论一下自给自足的问题。如果我们开发纯React组件——那么可以轻松地让它们独立工作(可重用),你甚至可以参考官方指南学习编码方式。但如果我们需要在组件内提供默认的自身样式,需要怎样实现呢?

当然,我们可以选择“纯JS”方法向我们的JSX文件加入内联样式,就像这样:

  1. const render = function() {  
  2.   const defaultStyle = {  
  3.     color: ‘red’,  
  4.   };  
  5.     
  6.   return (  
  7.     <div style={defaultStyle}>  
  8.       I have inline styles  
  9.     </div>  
  10.   );  
  11. };  

JSX内联样式

这个方法存在一个问题,我们几乎无法通过父应用控制这个组件的样式。而且,如果我们需要加载图片或自定义字体文件,这个方法就会失效。所以,是否有更好的方法呢?

Webpack可以帮你解决这个问题!幸运的是,Webpack 加载器可以加载许多类型的文件。其背后的思想非常简单——在加载过程中动态地对载入文件进行可插拔转换。从本质上来说,加载器为我们处理各种文件。我们将选用一个特殊的babel-loader来将我们的ES6代码转译为ES5代码。

但最酷的是,加载器可以处理任何文件。所以,如果我们想加载样式——我们只需要添加style-loader!最终,我决定使用LESS,它稍微复杂一些——我将创建如下的加载链:

  • 首先,使用less-loader处理*.less文件,将其转换为CSS;
  • 然后,使用css-loader将编译好的css传递给下一个步骤;
  • 最后,使用style-loader将最终的样式引入到生成的代码中。

通过这个加载链,我们可以使用LESS编写组件的样式,下面这段代码演示了这种组件的入口点:

  1. import ‘./style/style.less’;  
  2. import Component from ‘./src/component’;  
  3. &nbsp;  
  4. export default Component;  

借助Webpack将样式引入到JavaScript中

正如你所见,加载样式像导入文件一样简单。的确,由less-loader、css-loader以及style-loader构成的加载链必须要在我们的Webpack配置文件中提前配置好(参考下一节的第一个示例)。

现在我们可以从相互独立的组件中加载样式,但是CSS默认使用全局变量,这意味着如果两个组件中使用了相同的类名,其中一个将被改写,我们如何回避这个问题呢?

我能想出来的最简单的方法是:在HTML标签和样式文件中,使用组件名称作为最外层元素的类名,人为地创建组件的作用域。就像这样:

  1. .component-name {  
  2.   span {  
  3.     color: red;  
  4.   }  
  5. }  
  6.   
  7. const render = function() {  
  8.   return (  
  9.     <div className=“component-name”>  
  10.       <span>I have scoped styles</span>  
  11.     </div>  
  12.   );  
  13. };  

组件样式的人为作用域

如此一来,所有组件将拥有唯一命名,当他们被封装进同一个应用中时不再产生冲突,能够很好地协同工作。而且,当我们想在应用层重新定义组件样式时,可以使用组件命名作为类名直接改写。

发布到NPM

接着,你如何将ES6模块发布到NPM上呢?事实上,你无须这样做。至少目前还不需要。你可以直接向外发布你的原生代码,但这通常是一个糟糕的想法,当你后续想将代码引入到主应用或其它组件中时会感到非常痛苦。当然,你可以通知Webpack(同样也可以通知Browserify)来编译需要用到的代码。但是,如果这样做,你不得不使用Webpack(以及浏览器)来运行各种测试,我通常在命令行中运行测试,因为这样运行速度更快,并且便于后续的自动化测试封装(也就是我们常说的持续集成)。

目前我在项目中应用的最好方法是——同时传送原生ES6代码和编译后的ES5代码,实现这个方法非常简单:

  • 向你的package.json文件添加构建指令;
  • 在预发布阶段运行构建指令;
  • 使用编译后的ES5代码作为主文件;
  • 通过package.json文件的额外字段暴露ES6代码。

它看起来是这样的:

  1. {  
  2.   “name”“es6-component”,  
  3.   “version”“1.0.0”,  
  4.   “description”“My awesome ES6 component”,  
  5.   “main”“es5/component.js”,  
  6.   “es6”“index.js”,  
  7.   “scripts”: {  
  8.     “build”“gulp build”,  
  9.     “prepublish”“npm run build”  
  10.   }  
  11. }  

将ES6模块发布到NPM上的package.json

这种方法有两个优点:

  1. 在所有ES5代码中,我们可以轻松地引入或require()这个模块,它能够正常工作!
  2. 如果我们出于某些原因需要用到模块的源代码,我们同样可以轻松地通知Webpack使用“ES6”字段来加载或引入ES6代码。

单元测试及代码覆盖率

你必须佩服的是,在Babel中配置单元测试和代码覆盖率检测非常简单(得益于Babel伟大的生态系统,正如我之前提到的那样)。

  1. –compilers: jsx?:babel/register  

我一直使用mocha作为测试工具,所以我会讲解如何将其应用到项目中。支持ES6代码非常简单,你只需在执行mocha指令时添加一个编译flag(或添加到mocha配置文件)就可以通知mocha使用babel预编译器:

完成这一步之后,就可以在ES6代码中运行测试了,当然你也可以使用ES6来编写测试文件!

现在要处理最棘手的部分——我们有了React组件,我们想使用mocha完成测试,却又不想在浏览器中运行测试(可以运行一个PhantomJS,但是它非常繁重),我们应该如何去做呢?

答案就是jsdom——基于iojs用JavaScript实现了WHATWG的DOM和HTML标准。它比Phantom更轻量,并且满足几乎所有我们测试React所需的功能。

以下是为React配置jsdom环境的测试helper文件的示例:

  1. import localStorage from ‘localStorage’;  
  2. import {jsdom} from ‘jsdom’;  
  3. &nbsp;  
  4. // init jsdom  
  5. global.document = jsdom();  
  6. global.window = global.document.defaultView;  
  7. global.navigator = global.window.navigator;  
  8. &nbsp;  
  9. // local storage polyfill  
  10. global.window.localStorage = localStorage;  
  11. global.localStorage = localStorage;  
  12. &nbsp;  
  13. // import react after dom  
  14. const React = require(‘react/addons’);  
  15. &nbsp;  
  16. before(function() {  
  17.     // expose react and testutils  
  18.     this.React = React;  
  19.     this.TestUtils = React.addons.TestUtils;  
  20. });  
  21. &nbsp;  
  22. beforeEach(function() {  
  23.     // create container  
  24.     this.container = global.window.document.createElement(‘div’);  
  25. });  
  26. &nbsp;  
  27. afterEach(function(done) {  
  28.     // clean jsdom  
  29.     this.React.unmountComponentAtNode(this.container);  
  30.     // timeout  
  31.     setTimeout(done);  
  32. });  

在命令行中运行React测试的jsdom环境

注意我使用import声明引入jsdom和localStorage,但却使用require()加载React,这是因为import声明会被提前,我们需要确保在jsdom初始化之后加载React。如果你尝试在DOM就绪前加载React,那么直到你与组件进行交互时它才会开始工作,然后你得到的往往是各种各样的错误,因为React假设这属于非浏览器环境,不使用DOM相关特性。

现在我们有了正确运行的mocha测试,我们也可以轻松获取Istanbul覆盖率检测工具并正常执行:

  1. istanbul cover _mocha — -R spec  

组件交互

接下来实现我们的加分需求——无相互依赖的交互。这一部分内容来自于我正从事的一个项目,如果你不太感兴趣,大可跳过这一节。

当然,如果你依然感兴趣,那让我们一起讨论一下实现这个目标的方法。

我们需要使松耦合的系统中各部分相互交流,在完美的实现中它们甚至无须知道相互的存在,只须响应请求。这样的任务听起来是否非常熟悉?

你或许曾经听说过微服务这个概念,你甚至可能已经使用过它们。如果你对微服务所知甚少,我推荐你看一下Fred George对于微服务精彩的讲解

如果你懒得看(或者想稍后看)他的演讲,那么简单了解一下微服务的思想:许多小规模、独立的,通过通用接口相互交流的离散服务实体。通用接口可以有多种形式,其中包括:消息总线、表征状态传输(REST,又称表征状态转移)、远程过程调用(RPC)等。

因为我们做的是客户端JavaScript应用,在接口问题上我们的确没有那么多的选择。幸运的是,有一个非常赞的库,它专门处理类似这样的情况——postal.js。

即使它仍然基于回调函数实现底层功能,但是它将消息分为channel和topic两类,提供了非常大的弹性。

通过示例演示所有的这一切是如何工作的,十分容易。

想象一下我们有一个App需要一些认证和URL签名功能来获取数据。通过postal我们可以定义一个认证channel,它将会监听那些签名请求,并通过不同的topic返回已签名的URL,就像这样:

  1. import postal from ‘postal’;  
  2. // get postal channel for current component  
  3. const channel = postal.channel(“auth”);  
  4. &nbsp;  
  5. const signUrl = () => {  
  6.   // signing code here  
  7. };  
  8. &nbsp;  
  9. // listen to sign requests  
  10. const signAction = channel.subscribe(“url.sign”function(url, envelope) {  
  11.   const signedUrl = signUrl(url);  
  12.   channel.publish(“url.signed”, signedUrl);  
  13. });  
  14.   
  15. import postal from ‘postal’;  
  16. // get postal channels  
  17. const channel = postal.channel(“query”);  
  18. const authChannel = postal.channel(“auth”);  
  19. // define data fetching stuff  
  20. const requestUrl = ‘http://…’;  
  21. const getData = () => {  
  22.   // data-fetching logic here  
  23. };  
  24. // listen for data requests  
  25. const allItemsAction = channel.subscribe(“items.all”, () => {  
  26.   // wait for signed url  
  27.   authChannel.subscribe(“url.signed”, (signedUrl) => {  
  28.     const data = getData(signedUrl);  
  29.     channel.publish(“items.data”, data);  
  30.   });  
  31.   authChannel.publish(“url.sign”, requestUrl);  
  32. });  

在组件中使用postal.js的channels进行通信

这段代码可以很好地工作,因为我们无须了解任何有关其它组件的信息——我们只须了解使用哪个channel和topic。一方面,这意味着管理这些内容的负担落到开发者身上;另一方面,在这种实现的基础上,我们可以轻松地更换认证组件——今天我们使用OAuth,明天我们使用自定义token系统,以后使用其它功能,我们只须更换一下认证组件就可以支持新的工作流。

代码检查和源码映射(Source Map)

最后,我们再为项目加入一些小改进:支持代码检查,启用源码映射。

jshint不支持ES6和React代码,我们将使用eslint代替它。eslint支持JavaScript和JSX的语法,并可以通过插件进行扩展。

将之于Webpack结合非常容易,你只须在你的Webpack配置文件中添加几行代码。下面这个代码片段展示了所需的配置:

  1. var path = require(‘path’);  
  2. &nbsp;  
  3. module.exports = {  
  4.     devtool: ‘inline-source-map’,  
  5.     debug: true,  
  6.     // your other props here  
  7.     // …  
  8.     module: {  
  9.       preLoaders: [  
  10.         {  
  11.           test: /\.jsx?$/,  
  12.           exclude: /node_modules/,  
  13.           loader: ‘eslint-loader’  
  14.         },  
  15.       ]  
  16.       // other modules options here  
  17.     }  
  18. };  

注意node_modules文件夹不包括在检查的范围内,所以程序只会检查你实际的组件代码。

Webpack将在编译过程结束后把所有的检查结果输出到控制台。

Turris.js——汇总一切

结合以上提及的所有内容,我创造了Turris.js——它包含一系列helper包,还有一个yeoman生成器,你可以用它轻松地为ES6 React应用和独立组件搭建脚手架。

如果你对生成器不感兴趣,只想看看应用和独立组件的示例代码,你可以在它们各自的Github仓库中找到它们:turris-example-application还有turris-example-component

创建新应用

我尝试使创建新应用尽可能地简单,你可以这样创建一个新应用:

  • 确保你已安装最新的io.js和NPM;
  • 从NPM安装yeoman和turris-generator:
    1. npm install -g yo generator-turris  
  • 创建一个新文件夹存放你的App,进入这个文件夹,执行turris生成器:

  • 在回答一系列问题后,yeoman将为你完成所有工作;
  • 执行“npm start”,启动你的新App;
  • 访问http://localhost:8080,打开你最喜欢的编辑器并将应用改为你喜欢的样子。

除了为基础应用搭建脚手架外,Turris生成器还提供了三个helper生成器:

  1. 组件生成器——将在你的App中生成一个新的组件,可以非常便捷地生成你将不会重用的小组件;
  2. 页面生成器——将生成一个新页面并将它插入到React路由中,这里没有什么奇妙之处,它只是一个帮助你节省时间的子生成器;
  3. Docker生成器——将生成一个dockfile,其中包含所有运行App所需的文件。

更多有关使用方法、子生成器、项目结构以及其它内容信息,可以在项目仓库的Readme文件中找到。

创建一个独立组件

创建一个组件并不难,你可以这样做(需求与主生成器相同):

  • 通过NPM安装turris-generator-component:
    1. $ npm install -g generator-turris-component  
  • 为你的组件创建一个新文件夹,进入这个文件夹,执行turris组件生成器:
  • 在回答一系列问题后,yeoman将为你完成所有工作;
  • 执行“npm start”,在调试模式下启动你的组件;
  • 访问http://localhost:8080,打开你最喜欢的编辑器并将应用改为你喜欢的样子。

更多有关使用方法、项目结构以及其它内容信息,可以在项目仓库的Readme文件中找到。

结束语

希望你已在这篇文章中找到有用的内容,或许你甚至已尝试我编写的生成器。即使你没有这样做——也请帮助我宣传一下!如果你已经尝试过——我非常乐意听取任何反馈意见,处理你们可能遇到的问题。当然,也很欢迎大家提交Pull Requests。(译者:刘振涛,审校:陈秋歌)

Categories: JavaScript