gulp4 babel browserify

本文包含以下内容：

1. 如何利用插件 babel + browserify 在项目中运行es6语法
2. 如何利用gulp 任务，在项目中运行es6 （包括 js压缩，sass编译）
3. 错误 ：ParseError: 'import' and 'export' may appear only with 'sourceType: module' 的解决方法

地址 ： https://gitee.com/amazing_steven/vue_browserify.git

如何在项目中使用es6而不用考虑浏览器是否能够支持尼？

这个需要分2部分来说明，一是 es6语法，一个是模块化引入，这个就分别对应2个插件babel 和 browserify。

这里主要利用gulp 来实现，进入主体了解之前先学习一下下面的小部分内容

在 common.js 中

var hello = 'hello world !';

function sayHello(){
    console.log('hello dear !')
}

export {hello,sayHello} //对外暴露

在 main.js 中

import {hello,sayHello} from './common.js'

console.log(hello); // hello world !

sayHello(); // hello dear !

创建一个.babelrc文件

{
    "presets":["es2015"]
}

此时打开 index.html 时，在控制台中可见报错，因为浏览器无法识别 import 和 export 语法，所以要对js进行编译

在根目录下，使用一下命令安装 babel 和 browserify

$ npm install babel-cli browserify -g
$ npm install babel-preset-es2015 --save-dev

安装完成之后，使用babel将es6编译为es5代码（但包含CommonJS语法）

$ babel js/src -d js/lib

    // -d 左侧是 开发的代码 main.js 和 hello.js 位置
    // -d 右侧是 bable编译后，会自动新建一个文件夹作为 编译后js 文件存放的位置

使用 browserify 编译js

browserify js/main.js -o dist/bundle.js

    // 使用 browserify 编译时，不会自动创建编译后的文件夹，需要事先手动创建
    // -o 左侧是 需要编译的js文件的位置
    // -o 右侧是 编译之后的js存放的位置

编译完成之后，修改 index.html 引入的 main.js 文件的位置

    修改为

此时打开 index.html ，打开F12即可看到

hello world !
hello dear !

好了，编译和打包已经完成了，但是如果文件很多，总不能一个一个去添加，所以这里还需要一个监听变化的脚本。

按照上面的逻辑，我们可以使用npm 的watch 来监听文件变化，所有就有了下面的逻辑(这里的代码逻辑上是监听了src/ 下的所有文件，但是实际上是只有在保存时候生效，所以多按几次CTRL + S 吧)

var process = require('child_process');
var fs = require('fs');
var filePath = './src/' ;
fs.watch(filePath,(event,filename)=>{
    if (filename){
        console.log(`${filename}文件发生更新`);
        process.exec("babel src -d dist", function(error, stdout, stderr) {
            console.log("babel src -d dist")
        });
        process.exec("browserify dist/main.js -o bundle.js", function(error, stdout, stderr) {
            console.log("browserify dist/main.js -o bundle.js")
        });
    }
})

额。。。实际操作中的确可以编译

但是 如果项目中的js 文件很多，保存的时候会执行很多次编译，最后我的编辑器跪了T_T

所以果断换了gulp来使用。

gulp 新建任务编译es6

因为上面我们已经全局安装了browseriry，所以只需要安装一下全局的gulp 即 `npm install -g gulp`

之后

package.json

{
  "name": "gulp4",
  "version": "1.0.0",
  "description": "",
  "main": "entry.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.8.3",
    "@babel/preset-env": "^7.8.3",
    "@babel/runtime": "^7.8.3",
    "babel-loader": "^8.0.6",
    "babelify": "^10.0.0",
    "browserify": "^16.5.0",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-rev": "^9.0.0",
    "gulp-series": "^1.0.2",
    "gulp-uglify": "^3.0.2",
    "gulp-watch": "^5.0.1",
    "gulp-watch": "^5.0.1",
    "vinyl-source-stream": "^2.0.0"
  }
}

.babelrc

{
  "presets": ["@babel/preset-env"]
}

gulpfile.js

const gulp = require("gulp"),
    babel = require("gulp-babel"),
    uglify = require("gulp-uglify"),
    concat = require("gulp-concat"),
    browserify = require("browserify"),
    source = require("vinyl-source-stream");

gulp.task("babel", function () {
    return gulp.src("./public/es6/*.js")
        .pipe(babel())
        .pipe(uglify())
        .pipe(gulp.dest("js/"));
});

gulp.task("browserify", gulp.series(["babel"], function () {
    var b = browserify({
        entries: "./js/index.js"
    });

    return b.bundle()
        .pipe(source("app.min.js"))
        .pipe(gulp.dest("./dist/js"));
}));

gulp.task("default", gulp.series(["browserify"])); //默认编译，但不会监听

运行之后果然，完美编译。

最后稍微优化一下，加上监听和文件清除（确保每次编译出来的都是最新的内容）

const gulp = require("gulp"),
    babel = require("gulp-babel"),
    uglify = require("gulp-uglify"),
    concat = require("gulp-concat"),
    browserify = require("browserify"),
    source = require("vinyl-source-stream");
    watch = require('gulp-watch');
    clean = require("gulp-clean");

const path = "./static/public/es6/"; //开发代码位置
const dist = "./static/bundle/"; // 编译后的代码位置

gulp.task("clean", function () {
    return gulp.src(dist+"/*.js")
        .pipe(clean())
});

gulp.task("babel", gulp.series(["clean"],function () {
    return gulp.src(path+"*.js")
        .pipe(babel())
        .pipe(uglify())
        .pipe(gulp.dest(dist));
}));

gulp.task("browserify", gulp.series(["babel"], function () {
    var b = browserify({
        entries: dist+"main.js"
    });

    return b.bundle()
        .pipe(source("bundle.min.js"))
        .pipe(gulp.dest(dist));
}));

gulp.task('auto',function () {
    watch(path+'*.js',  gulp.series('browserify'));
})

上面已经说了js的编译和压缩，这里再多说一下如何打包sass 

const gulp = require("gulp"),
    concat = require("gulp-concat"),
    watch = require('gulp-watch');
    clean = require("gulp-clean");
    autoprefixer = require('gulp-autoprefixer'),
    uglifycss = require('gulp-uglifycss'), 
    sass = require("gulp-sass"),     
    cssmin = require('gulp-clean-css'),
    cssver = require('gulp-make-css-url-version'),
    rename = require('gulp-rename');

//开发代码位置
const path = "./lib/**/*.js"; 

// 编译后的代码位置
const dist = "./dist/"; 

gulp.task('sass', function () {
    // 找到 src/css/ 下的所有 css 文件
    return gulp.src(path_css)
        .pipe(sass({ style: 'expanded' }))
        // 添加前缀(如：-webkit-)
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        // 合并为一个css
        .pipe(concat('common-style.css'))
        // 合并后的css 保存到 dist/css 下
        .pipe(gulp.dest(dist_css))
        .pipe(rename('common-style.min.css'))
        .pipe(cssver())
        .pipe(cssmin())
        .pipe(gulp.dest(dist_css));
});

gulp.task('default',function () {
    watch(path_css, gulp.series("sass"));
})

ParseError: 'import' and 'export' may appear only with 'sourceType: module'

在编译的过程中遇到了以上错误，这里参考https://www.e-learn.cn/content/wangluowenzhang/1090546 找了解决方案。

即： 更改browserify 的任务代码如下

gulp.task("babel", gulp.series(["clean"],function () {
    return gulp.src(path)
        .pipe(babel())
        .pipe(uglify())
        .pipe(gulp.dest(dist));
}));