gulp4 + wepack-stream 编译ES6为ES5（包括import引入编译）

es6编译为es5，包括import的引入方式解决方案

1、首先安装gulp 

cnpm install gulp -g // 全局安装，为了后面执行任务方便，也可省略，但是在执行任务时，需要进入到局部安装目录，建议安装
cnpm install gulp --save-dev // 安装在项目中，用于任务配置

2、准备安装babel（专门用于编译js的版本插件），以及gulp的babel插件

cnpm install babel-preset-env  babel-plugin-transform-remove-strict-mode gulp-babel@7
 gulp-babel --save-dev // 分别代表  babel编译模板  编译时移除全局严格模式  babel核心包（gulp4需要core7）  gulp的babel插件

【可选安装】

如果不安装，第3步需要一点小小的改动。

cnpm install gulp-load-plugins gulp-uglify --save-dev  // 对应代表  gulp插件一次性引入  js压缩

3、在gulpfile.js中编写编译任务

var config = {
        src: "src",
        style: "./style",
        dest: "dist"
    }, // 文件路径配置
    gulp = require('gulp'), // gulp 引入
    $ = require('gulp-load-plugins')(),    //这样的话 其他的模块可以直接使用 $ 符号来引入
    open = require('open');


// 编译js
gulp.task('script', () => {
    return gulp.src(config.src + '/*.js')
        .pipe($.babel({
            presets: ['env'] //编译模板，必须配置，否则不会编译成es5或其他的版本
        }))
        // .pipe($.uglify()) // 压缩
        .pipe(gulp.dest(config.dest + '/js'));
});

4、执行任务查看效果

进入到当前项目目录，执行gulp script，可以对比前后变化

编译前：

编译后：

添加了压缩后：

可以看到，import引入的js或json没有按照想法编译，require浏览器无法识别，需要进行编译为浏览器可识别的写法。

5、编译（import）为浏览器识别的代码 webpack-stream

• 先安装必须包

cnpm install webpack-stream vinyl-named --save-dev  // 分别对应 gulp的webpack插件  不重命名js文件

• 修改gulpfile.js

const config = {
        src: "src",
        page: "pages",
        style: "style",
        dest: "dist"
    }, // 文件路径配置
    gulp = require('gulp'), // gulp 引入
    $ = require('gulp-load-plugins')(),    //这样的话 其他的模块可以直接使用 $ 符号来引入
    open = require('open'),
    webpack = require('webpack-stream'),// 打包js的import
    named = require('vinyl-named'); // 打包时，不重命名js
    // webpackCongfig = require('./webpack.config.js'); 如果需要自行配置打包配置，新建一个webpack.config.js，配置方法和webpack一样


// 编译js
gulp.task('script', () => {
    return gulp.src(config.src + '/*.js')
        .pipe(named()) // 不改变js名字
         // 如果是自定义配置,则直接引入.pipe(webpack(webpackCongfig ))
         // 下面写法是默认，默认是打包之后进行压缩了，可支持引入js和json
         // 如果需要使用引入css或scss或less，则必须配置webpackCongfig 
        .pipe(webpack()) 
        // .pipe($.babel({
        //     presets: ['env'] //编译模板，必须配置，否则不会编译成es5或其他的版本
        // }))
        // .pipe($.uglify()) // 压缩
        .pipe($.plumber({errorHandler: errrHandler})) // 检查错误，
        // 防止出错的时候，奔溃
        .pipe(gulp.dest(config.dest + '/js'))
        .pipe($.connect.reload());
});

• 查看效果