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()); }); 查看效果
