摘要：下一步我們將結(jié)果輸出到文件。這是我們用編寫的第一個非常簡單的組建。使用將創(chuàng)建的組建導(dǎo)出以便在其它地方能夠正常導(dǎo)入使用。

這是React和ECMAScript6結(jié)合使用系列文章的第一篇。

本文出自從零到壹全棧部落

下面是所有系列文章章節(jié)的鏈接：

React 、 ES6 - 介紹（第一部分）

React類、ES7屬性初始化（第二部分）

React類，方法綁定（第三部分）

ES6中React Mixins的使用（第四部分）

React 和ES6 之JSPM的使用（第五部分）

React 和 ES6 工作流之 Webpack的使用（第六部分）

本篇文章Github源碼

自從ReactJS v0.13.0 Beta 1宣布，React 組建可以使用ECMAScript 6 后，它能給我們帶來什么好處呢？

ECMAScript6 (或者 ECMAScript 2015)是一個新的標(biāo)準(zhǔn)(它從26.06.2015更新，在2015年定稿，它是現(xiàn)在官方的標(biāo)準(zhǔn)-鏈接),它為JavaScript帶來了很多新的特性，例如：classes，arrow functions, rest parameters, iterators, generators … 等更多的新特性。

如果你不是特別熟悉ECMAScript 2015的新特性，我將重點推薦你看看這個鏈接。

看看ES6的兼容性表，我們會發(fā)現(xiàn)不是所有的瀏覽器都支持ES2015的新特性。幸運(yùn)的是，你不需要花時間等所有的瀏覽器都支持ES2015，現(xiàn)在已經(jīng)有相關(guān)的解決方案。你可以使用transpilers將ES2015的代碼轉(zhuǎn)換成ES5。這很類似于在JavaScript中如何將CoffeeScript轉(zhuǎn)換成Coffee code。

Babel是解決方案之一，它真的很神奇的工具。對于作者有太多的感謝。Babel有什么好處呢，Babel支持大量不同的框架，構(gòu)建系統(tǒng)、測試框架、模板引擎，看這里。

給你一個快速知道babel如何工作的例子。下面就是我們用ECMAScript 6寫的例子：

var evenNumbers = numbers.filter((num) => num % 2 === 0);

運(yùn)行babel以后得到下面的代碼：

var evenNumbers = numbers.filter(function (num) {
    return num % 2 === 0;
});

同樣的方法適用于其它ES6代碼到ES5代碼的轉(zhuǎn)換。

為了讓babel有連續(xù)的工作流，我們將使用Gulp。這是基于nodejs的任務(wù)構(gòu)建工具，可以自動改善繁瑣的任務(wù)。

明顯，你需要安裝nodejs，如果你沒有安裝，需要在你系統(tǒng)上安裝nodejs。

下一步，你將需要安裝全局的Gulp:npm install --g gulp。

創(chuàng)建一個空文件夾，切換到這個文件夾中，在終端輸入npm init初始化你的package.json。

運(yùn)行npm install --save react react-dom,這將安裝react和react-dom到你的node_modules文件夾并且作為依賴庫保存到package.json文件中。

運(yùn)行npm install --save-dev gulp browserify babelify vinyl-source-stream babel-preset-es2015 babel-preset-react,這將安裝更多的依賴到你的node_modules文件夾。

如果想要了解更多關(guān)于step 5中的內(nèi)容，請移步：my article about Browserify, Babelify and ES6

在你的根目錄下面創(chuàng)建gulpfile.js文件，并將下面的代碼拷貝到里面。

var gulp = require("gulp");
var browserify = require("browserify");
var babelify = require("babelify");
var source = require("vinyl-source-stream");

gulp.task("build", function () {
    return browserify({entries: "./app.jsx", extensions: [".jsx"], debug: true})
        .transform("babelify", {presets: ["es2015", "react"]})
        .bundle()
        .pipe(source("bundle.js"))
        .pipe(gulp.dest("dist"));
});

gulp.task("watch", ["build"], function () {
    gulp.watch("*.jsx", ["build"]);
});

gulp.task("default", ["watch"]);

我猜，相關(guān)的一些解釋將對你有幫助：

Lines 1-4. 我們需要安裝node.js modules并且將他們賦值給變量。

Line 6. 我們定義gulp任務(wù)名為build以便我們可以使用gulp build來運(yùn)行。

Line 7. 我們開始描述我們的構(gòu)建任務(wù)將做什么。我們告知Gulp來使用app.jsx。我們打開調(diào)試模式，這有利于我們開發(fā)調(diào)試。

Lines 8-11. 我們應(yīng)用Babelify來轉(zhuǎn)換我們的代碼。這允許我們將ECMAScript6轉(zhuǎn)換成ECMAScript5。下一步我們將結(jié)果輸出到dist/bundle.js文件。這幾行代碼現(xiàn)在使用了Babel 6 中叫做presets的新特性。

Lines 14-16. 我們定義一個名字叫做watch的任務(wù)以便我們能夠通過gulp watch來運(yùn)行。無論什么時候jsx文件內(nèi)容發(fā)生變化，這個任務(wù)都會重新進(jìn)行編譯。

Line 18. 我們定義默認(rèn)的gulp任務(wù)以便我們輸入gulp時自動運(yùn)行，此任務(wù)只執(zhí)行監(jiān)視任務(wù)。

典型的工作流將是在終端輸入gulp然后按下enter鍵。它將連續(xù)的監(jiān)聽react組建中代碼的變化。

你可能已經(jīng)注意到我們在使用.jsx代替.js語法。JSX是ReactJS團(tuán)隊研發(fā)的JavaScript擴(kuò)展語法。這個格式對于ReactJS的開發(fā)更加方便快捷。

這是關(guān)于JSX更多的信息。

這個時候希望你多一點耐心

在項目的根目錄下面，添加一個hello-world.jsx文件，并且在文件中code下面的代碼。這是我們用ES6編寫的第一個非常簡單的React組建。

import React from "react";

class HelloWorld extends React.Component {
    render() {
        return 
Hello from {this.props.phrase}!
;
    }
}

export default HelloWorld;

代碼解析：

Line 1. 導(dǎo)入React庫并且將它存到變量React中。

Lines 3-8. 使用ES6創(chuàng)建繼承自React.Component的類.
我們添加非常簡單的render方法并且return一個包含phrase屬性的

標(biāo)簽。

Line 9. 使用export default HelloWorld將創(chuàng)建的組建導(dǎo)出以便在其它地方能夠正常導(dǎo)入使用。

為了便于理解，你也可以將下面ES5代碼將上面文件中的代碼替換，你會發(fā)現(xiàn)下面的代碼就是上面代碼的變體，上面是ES6，下面是ES5.

import React from "react";

var HelloWorld = React.createClass({
    render: function() {
        return (
            
Hello from {this.props.phrase}!
        );
    }
});

export default HelloWorld;

結(jié)束了

讓我們來結(jié)束我們簡單的例子。

創(chuàng)建名字為app.jsx的文件。

import HelloWorld from "./hello-world";
import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
    ,
    document.querySelector(".root")
);

這里我們導(dǎo)入上面創(chuàng)建的組建HelloWorld并且將HelloWorld創(chuàng)建了對象并且設(shè)置phrase屬性。請注意，這里我們使用特殊的庫ReactDOM來渲染HelloWorld組建。

下一步，我們來創(chuàng)建index.html.

現(xiàn)在在終端運(yùn)行gulp命令(它將創(chuàng)建dist/bundle.js文件)并且在瀏覽器中打開index.html，運(yùn)行效果如下：

參考文檔

Classes in ECMAScript 6

Exploring ES6, e-book

BabelJS

An Introduction to Gulp.js

JSX in Depth

掃碼申請加入全棧部落