标签：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-dom
npm 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 browser play mod height idt intern plugins javascrip
原文地址：http://www.cnblogs.com/huansky/p/6004738.html
