react 脚手架我记得内置的好像是 webpack 如果要修改的话，还要输入命令什么的，我本来就对 webpack 不了解，也不喜欢用，基础配置信息我倒行，我属实对 webpack 不感兴趣，我不喜欢使用 npm 来管理我的项目。虽然脚手架很方便，我觉得学习不能走捷径。
我目前也没有大型项目需要我打包管理构建什么的，我实践也不利于我学习，光敲个命令对我没什么好处，我还懒的记。
- Browserify 可以让我们在浏览器端使用 像 node一样的 require，export，也可以使用 npm 中的模组。
- gulp 是一个前端任务工具自动化工具，它可以帮我们打包，转义，自动的。
- 使用 browserify 进行 babel 转义的工具，React 的 jsx 或 ES6 语法转成 ES5
const gulp = require('gulp');
const uglify = require('gulp-uglify');
const htmlreplace = require('gulp-html-replace');
const source = require('vinyl-source-stream');
const browserify = require('browserify');
const watchify = require('watchify');
const babel = require('babelify');
const streamify = require('gulp-streamify');
const { parallel } = require('gulp');
// 位置参数
const path = {
HTML: 'index.html',
MINIFIED_OUT: 'bundle.min.js',
OUT: 'bundle.js',
DEST: 'dist',
DEST_BUILD: 'dist/build',
DEST_SRC: 'dist/src',
ENTRY_POINT: './app/index.js'
};
// 复制 html 到 dist
function copy(){
gulp.src(path.HTML)
.pipe(gulp.dest(path.DEST))
}
// 监听 HTML 是否变化 是复制到 dist
function watch(){
gulp.watch(path.HTML,copy);
var watcher = watchify(browserify({
entries: [path.ENTRY_POINT],
transform: [babel],
debug: true,
}));
return watcher.on('update', function () {
watcher.bundle()
.pipe(source(path.OUT))
.pipe(gulp.dest(path.DEST_SRC))
console.log('Updated');
})
.bundle()
.pipe(source(path.OUT))
.pipe(gulp.dest(path.DEST_SRC));
}
// 执行 production 转义
function Copys(){
browserify({
entries: [path.ENTRY_POINT],
transform: [babel],
})
.bundle()
.pipe(source(path.MINIFIED_OUT))
.pipe(streamify(uglify(path.MINIFIED_OUT)))
.pipe(gulp.dest(path.DEST_BUILD));
}
// dist script 引用替换
function replaceHTML(){
gulp.src(path.HTML)
.pipe(htmlreplace({
'js': 'build/' + path.MINIFIED_OUT
}))
.pipe(gulp.dest(path.DEST));
}
// 执行 gulp 会执行 gulp default 的任務：copy,watch。若跑 gulp production，則會執行 Copys,replaceHTML
const build = parallel(copy,watch);
const production = parallel(Copys,replaceHTML);
exports.default = build;
exports.production = production;
目前 index.html 可以自动转化，但是 JSX 需要手动，这是我很烦的地方，我本来是想百度找一篇转化的，因为 gulp 4.0.1 版本 代码都没有，只有 3版本的，我刚开始降级，然后 node 又不兼容，这就是 npm，node 的问题，版本兼容太烦了，就跟 scss 一样，往往很多时间就花在这些上面了。于是我放弃了，我开始看 gulp 文档，基本功能还是有了，以后会随着需要出新的配置。