首页 > 代码库 > 使用gulp进行React任务的构建

使用gulp进行React任务的构建

对于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="http://www.mamicode.com/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即可。

此时会将reactreact-dom一起打包到bundle.js中。

如果不希望将外部依赖打包进来,即此时index.html中加入如下代码:

<script src="http://www.mamicode.com/libs/react/react.min.js"></script>
<script src="http://www.mamicode.com/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任务的构建