ReactJS+es6+gulp+browserify開發環境搭建

通過前端自動化工具gulp，同時要實作commonjs規範，來搭建reactJS+es6的開發環境

1.npm init初始化package.json檔案

2.我們需要将jsx轉化為js文法，并且同時将es6/es7轉化為es2015，這裡我們來介紹一下browserify轉化工具。

（1）什麼是browserify

browserify可以實作類似子產品管理器（比如npm,bower等），但是browerify并不是一個嚴格的包管理器，

隻是讓伺服器端的CommonJS格式的子產品可以運作在浏覽器端，我們知道nodejs（運作在後端），是支援

CommonJS規範的，如果要在前端實作CommonJs規範，那麼browserify是一個很好的工具，相當于間接

給浏覽器實作了Npm規範。

（2）我們主要來了解browerify的兩個配置項

transform：

官方的解釋：Specifies a pipeline of functions (or module names) through which the browserified bundle will be run.

意思就是一個特殊的管道函數（或者是子產品名），通過這些函數可以依次引入，來實作轉化源程式。

transfrom有一系列的子產品。常見的有（a）babelify用于轉化es6——>es5。（b）reactfy——>用于轉化

JSX文法到js文法。

extensions:

官方的解釋：Array of extensions that you want to skip in require() calls in addition to .js and .json.

這裡的意識是希望在以.js或者.json字尾的檔案之外，其他格式的檔案也可以使用require()文法。比如.coffee

檔案。

舉例：我們舉例來說明如何将coffeeJS通過browserify轉化為JS

var bowserify=require('gulp-browserify');
.....

gulp.src('src/coffee/app.coffee', { read: false })
    .pipe(browserify({
      transform: ['coffeeify'],
      extensions: ['.coffee']
    }))
           

3.如何實作es6+react的開發環境

首先我們要安裝所需要的包依賴.package.json檔案。

通過npm install -s或者npm install -save-dev安裝，主要的包為reactfy,babelify,browserify等，

然後寫gulp的配置檔案，主要部分為：

gulp.src('js/app.jsx')
        .pipe(browserify({
            transform: ['babelify', 'reactify']
        }))
        .pipe(rename('app.js'))
        .pipe(gulp.dest('build'));
           

附上github的demo位址：https://github.com/alexbeletsky/react-gulp-es6