標籤：gulp browser play mod height idt intern plugins javascrip
對於gulp在react中的構建，找了很多資料，看了很多文章，也根據文章實驗了很多遍，但是就是不成功。很多文章其實都或多或少缺少一些步驟，而且還不給源檔案參考，這對於新手來說就是大寫的懵逼。最後終於發現一篇文章可以實現，就轉載了。後面可以好好寫react了。
樣本目錄結構如下：
- libs/ - react/- node_modules/- src/ - main.js- gulpfile.js- index.html- bundle.js- package.json
其中，index.html代碼如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="example"></div> <script src="bundle.js"></script></body></html>
src/main.js代碼如下：
let React = require(‘react‘);let ReactDOM = require(‘react-dom‘);ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById(‘example‘));
在這裡，選擇使用browserify進行打包，gulp進行任務構建。由於使用了ES2015和JSX文法，因此使用Babel進行轉換。
首先安裝依賴：
npm install --save react react-domnpm install --save-dev gulp browserify babelify vinyl-source-stream
然後gulpfile.js代碼為：
var gulp = require(‘gulp‘);var browserify = require(‘browserify‘);var babelify = require(‘babelify‘);var source = require(‘vinyl-source-stream‘);gulp.task(‘script:build‘, function() { browserify(‘src/main.js‘) .transform(babelify, { presets: [‘es2015‘, ‘react‘] }) .bundle() .pipe(source(‘bundle.js‘)) .pipe(gulp.dest(‘./‘));});gulp.task(‘default‘, [‘script:build‘]);
但此時執行會報錯，因為babelify需要安裝相應的preset，因此在這裡需要：
npm install --save-dev babel-preset-es2015 babel-preset-react
然後執行gulp即可。
此時會將react和react-dom一起打包到bundle.js中。
如果不希望將外部依賴打包進來，即此時index.html中加入如下代碼：
<script src="libs/react/react.min.js"></script><script src="libs/react/react-dom.min.js"></script>
此時需要安裝browserify-shim，即
npm install --save-dev browserify-shim
然後在package.json中配置：
"browserify-shim": { "react": "global:React", "react-dom": "global:ReactDOM"}
此時gulpfile.js代碼為：
var gulp = require(‘gulp‘);var browserify = require(‘browserify‘);var shim = require(‘browserify-shim‘);var babelify = require(‘babelify‘);var source = require(‘vinyl-source-stream‘);gulp.task(‘script:build‘, function() { browserify(‘src/main.js‘) .transform(babelify, { presets: [‘es2015‘, ‘react‘] }) .transform(shim) .bundle() .pipe(source(‘bundle.js‘)) .pipe(gulp.dest(‘./‘));});gulp.task(‘default‘, [‘script:build‘]);
與之前相比，多了一句.transform(shim)。
原文連結：http://syaning.com/2015/11/09/gulp-react-task-build/?utm_source=tuicool&utm_medium=referral
使用gulp進行React任務的構建
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
