使用gulp进行React任务的构建
例子中的React版本为v0.14.2.
示例目录结构如下：
- 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'))
.大专栏 使用gulp进行React任务的构建nx">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)。
相关推荐
游走的豚鼠君 2020-11-10
81417707 2020-10-30
ctg 2020-10-14
小飞侠V 2020-09-25
PncLogon 2020-09-24
jipengx 2020-09-10
颤抖吧腿子 2020-09-04
wwzaqw 2020-09-04
maple00 2020-09-02
青蓝 2020-08-26
罗忠浩 2020-08-16
liduote 2020-08-13
不知道该写啥QAQ 2020-08-02
pengruiyu 2020-08-01
wmd看海 2020-07-27
孝平 2020-07-18
Eduenth 2020-07-05
iftrueIloveit 2020-07-04