使用gulp+browserify+babelify-css+babelify构建轻量级react开发环境
导读
在react
项目开发脚手架选型中,一般大多数情况都会选择create-react-app
这款流行的脚手架工具,
但是针对一些比较小的项目,个人建议还是动手搭建建一个小型且轻量的构建工具自用比较合适,下面我们使用gulp,
配合browserify,搭建react开发的环境
项目地址:https://github.com/RiversCoder/gulp-react-project
使用的技术栈
- gulp4.x
- gulp-load-plugins 自动加载
gulp-
开头的插件 - browserify 打包构建模块工具,只能构建js
- browserify-css 使
browserify
打包构建 - babelify
babel
编译es6
,react
- vinyl-source-stream 把
browserify
打包好的内容转换成gulp
读取的流 - babel-preset-es2015
babel
预设,编译es6
- babel-preset-react
babel
预设,编译react
安装项目依赖
{
"name": "gulp-react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-plugin-transform-remove-strict-mode": "^0.0.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babelify": "^8.0.0",
"browserify": "^16.2.3",
"browserify-css": "^0.15.0",
"gulp": "^4.0.2",
"gulp-clean": "^0.4.0",
"gulp-concat": "^2.6.1",
"gulp-connect": "^5.7.0",
"gulp-load-plugins": "^2.0.0",
"gulp-uglify": "^3.0.2",
"vinyl-source-stream": "^2.0.0"
},
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6"
}
}
项目目录结构
D:.
| .babelrc
| .gitignore
| gulpfile.js
| package.json
|
+---dist
|
\---src
| index.html
|
+---css
| style.css
|
\---script
Child.js
Parent.js
index.js
gulpfile.js
配置文件
实现的功能有:修改react文件后,自动构建,编译,刷新浏览器
let gulp = require('gulp');
let gulpLoadPlugins = require('gulp-load-plugins');
let browserify = require('browserify');
let babelify = require('babelify');
// let babel = require('gulp-babel')
let browserifyCss = require('browserify-css');
let source = require('vinyl-source-stream');
let $ = gulpLoadPlugins({ lazyload: true, rename: {} });
// 汇总当前输入输出的文件路径
const path = {
entry:{
all: ['src/index.html','src/css/*.css','src/script/*.js'],
css: ['src/css/*.css'],
js: ['src/script/*.js'],
allJs: ['src/script/index.js'],
html: ['src/index.html']
},
output:{
all: ['dist/index.html','dist/css/','dist/script/'],
html: ['dist/'],
css: ['dist/css/'],
js: ['dist/script/']
}
}
// 编译react jsx es6语法
const browserifyJs = (done) =>{
return browserify({
entries: path.entry.allJs,
debug: true,
transform: [ babelify.configure({
presets: ['es2015','react']
}), ]
}).transform(browserifyCss, {
autoInject: true,
autoInjectOptions:{
verbose: true,
insertAt: 'top',
},
minify: true,
// output: './dist/css/bundle.min.css'
}).bundle()
.pipe(source("bundle.min.js"))
.pipe(gulp.dest(path.output.js))
.pipe($.connect.reload())
}
// 拷贝html文件
const copyHtml = (done) => {
return gulp.src(path.entry.html)
.pipe(gulp.dest(path.output.html))
.pipe($.connect.reload())
}
// 合并拷贝css文件
const outputStyle = (done) => {
return gulp.src(path.entry.css)
.pipe($.concat('style.css'))
.pipe(gulp.dest(path.output.css))
.pipe($.connect.reload())
}
// 清理文件
const clear = (done) => {
try{
return gulp.src(path.output.all)
.pipe($.clean())
}catch(e){
done()
}
}
// 监听文件修改启动服务
const watchEdit = (done) => {
// 启动服务
$.connect.server({
name: 'Gulp React',
root: 'dist',
port: 8008,
livereload: true
});
// 分别对文件进行监听
gulp.watch(path.entry.js, gulp.parallel(browserifyJs));
gulp.watch(path.entry.css, gulp.parallel(outputStyle, browserifyJs));
gulp.watch(path.entry.html, gulp.parallel(copyHtml));
done()
}
exports.default = gulp.series( clear, copyHtml, outputStyle, browserifyJs, watchEdit)
执行打包输出结果
D:\me\gulp\gulp-react ([email protected])
λ npx gulp
[15:23:51] Using gulpfile D:\me\gulp\gulp-react\gulpfile.js
[15:23:51] Starting 'default'...
[15:23:51] Starting 'clear'...
[15:23:52] Finished 'clear' after 120 ms
[15:23:52] Starting 'copyHtml'...
[15:23:52] Finished 'copyHtml' after 326 ms
[15:23:52] Starting 'outputStyle'...
[15:23:52] Finished 'outputStyle' after 39 ms
[15:23:52] Starting 'browserifyJs'...
[15:23:54] Finished 'browserifyJs' after 2.38 s
[15:23:54] Starting 'watchEdit'...
[15:23:54] Starting server...
[15:23:54] Finished 'watchEdit' after 106 ms
[15:23:54] Finished 'default' after 2.98 s
[15:23:54] Gulp React started http://localhost:8008
[15:23:54] LiveReload started on port 35729
[15:23:54] Running server
采坑
一定注意babel
的版本,以及babelify
的版本是否匹配,而且不要忘记babel-core
的安装,以及本地文件.babelrc
文件的创建,这些都是大坑
参考资料
- Basic react gulpfile with browserfy and babel
- Working gulpfile.js with gulp-babel ES6 and React
- gulp-react过时的取代方案
- My Gulpfile using ES6 (Babel), Browserify, BrowserSync, SASS, Sourcemaps, and more… 参考价值高
- Browserify 使用指南
- 文章 https://snippets.aktagon.com/snippets/734-a-gulp-js-template-for-react-js-and-es6-projects