這裏使用的Gulp 版本有 V3.9.1，大版本爲3.0，如果使用了V4.0版本，配置上會有比較大的改變，具體可以參考另外一篇文章：
1.簡單說明一下：
gulp 是工具，
Babel 編譯 ES6 => ES5,
Browserify 添加瀏覽器支持。
2. 整體項目結構
3. 測試代碼
3.1 App.js
class App{
constructor(name) {
this.name = name;
}
render() {
document.querySelector("#app").innerHTML = ("test gulp babel " + this.name);
}
}
export default App;
3.2 入口文件 entry.js
import App from "./App";
(() => {
let app = new App("999");
app.render();
})();
3.3 index.html 頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Babel + Browserify</title>
</head>
<body>
<div id="app"></div>
<script src="dist/js/app.min.js"></script>
</body>
</html>
3.4 .babelrc Babel 基本配置
{
"presets": ["env"]
}
4.實現方式
目的一個，但實現方式多樣，目前這裏只列出來 2 個：
4.1 第一種實現方式
單獨使用 Gulp-babel 進行轉碼，然後再使用 Browserify 打包。
4.1.1 Package.json
{
"name": "gulpl_v3_babel",
"version": "1.0.0",
"description": "",
"main": "entry.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-preset-env": "^1.6.1",
"browserify": "^16.5.0",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-watch": "^4.3.11",
"gulp-uglify": "^3.0.2",
"vinyl-source-stream": "^2.0.0"
}
}
注意以上使用的 Gulp 版本。
4.1.2 gulpfile.js
const gulp = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const browserify = require('browserify');
const source = require('vinyl-source-stream');
// 編譯並壓縮js
gulp.task('js', function(){
return gulp.src('src/js/*.js')
.pipe(babel())
// .pipe(concat('app.js')) //should't merge for browserify support require module
.pipe(uglify())
.pipe(gulp.dest('build/js'))
});
// 監視文件變化，自動執行任務，自行按需使用，非必須。
gulp.task('watch', function(){
gulp.watch('src/js/*.js', ['browserify']);
});
// browserify [not support import|export but require]
gulp.task('browserify', ['js'], function () {
var b = browserify({
entries: './build/js/entry.js'
});
return b.bundle()
.pipe(source('app.min.js'))
.pipe(gulp.dest('dist/js'));
});
gulp.task('default', ['browserify', 'watch']);
直接使用 gulp 命令編譯，成功之後，訪問 index.html 頁面就可以看到效果。
4.2 不單獨使用 Gulp-babel 轉碼，直接使用 Browserify 的 transform 方法引入 Babel.
4.2.1 package.json
{
"name": "gulp_babel",
"version": "1.0.0",
"description": "",
"main": "entry.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"devDependencies": {
"babelify": "^8.0.0",
"babel-core": "^6.26.3",
"babel-preset-env": "^1.6.1",
"browserify": "^16.5.0",
"gulp": "^3.9.1",
"gulp-watch": "^4.3.11",
"gulp-uglify": "^3.0.2",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0"
},
"author": "",
"license": "ISC",
"dependencies": {}
}
4.2.2 gulpfile.js
const gulp = require('gulp');
const uglify = require('gulp-uglify');
const browserify = require('browserify');
const source = require('vinyl-source-stream');
const babelify = require('babelify');
const buffer = require('vinyl-buffer');
// 監視文件變化，自動執行任務，自行按需使用，非必須。
gulp.task('watch', function(){
gulp.watch('src/js/*.js', ['browserify']);
});
// browserify
gulp.task("browserify", function () {
var b = browserify({
entries: "./src/js/entry.js"
});
return b.transform(babelify, {
presets: [
'env' //轉換es6代碼
]
})
.bundle()g
.pipe(source("app.min.js"))
.pipe(buffer())
.pipe(uglify())
.pipe(gulp.dest("dist/js"));
});
gulp.task('default', ['browserify']);
直接訪問 index.html 展示效果一樣。
