在网上观看ES6的学习视频,了解如何创建一个基础的ES6工程,包括命令行的处理、创建JS编译任务、创建模板、服务任务脚本、监听测试等
记录一下,供以后自己参考
下面出现的文件,如果没有自己创建,cmd下创建命令是cd.>文件名.js
,其它像git之类的是touch 文件名.js
所有的构建脚本一定是放在tasks目录下的,即上面创建的js文件一定是在tasks目录下的
一些文件需要引入一些包,所以要安装所需要的包,命令cnpm install 包名 --save-dev
npm也行,可以一次性安装多个包,把所需要安装的包名全写在install后面即可
包安装完成后,在根目录下的package.json文件里的devDependencies参数中就能看到所安装的包的信息
1. 命令行的处理 (tasks/util/args.js文件)
需要安装 yargs
包
cnpm install yargs --save-dev
代码:
import yargs from 'yargs'; //引入这个npm包来处理命令行参数
//通过使用 yargs 这个模块来处理命令行的参数,主要是方便处理命令行参数的捕获和过滤
//引入后,定义一些基本的参数
const args = yargs
//区分线上环境还是开发环境
//通过option来提取命令行的参数,来区分命令行输入的是否有这个参数,进而来区分它是线上还是开发环境
.option('production',{
boolean: true, //表示是一个Boolean类型
default: false, /*如果在命令行中没有输入production这个项,那么参数就默认false,
就是开发环境,有的话则为线上环境*/
describe: 'min all scripts' //描述 不会被解析
})
//设置watch参数,来控制监听开发环境中修改的这些文件要不要自动编译,也通过命令行来控制
.option('watch',{
boolean: true,
default: false,
describe: 'watch all files'
})
//要不要详细地输出命令行执行的日志
.option('verbose',{
boolean: true,
default: false,
describe: 'log'
})
//处理压缩的
.option('sourcemaps',{
describe: 'force the creation of sroucemaps'
})
//设置服务器端口,来启动服务器
.option('port',{
string: true,
default: 8080,
describe: 'server port'
})
.argv //表示对输入的命令行的内容以字符串作为解析
export default args;
2. 处理js的构建脚本 (tasks/scripts.js文件)
需要安装gulp gulp-if gulp-concat webpack webpack-stream vinyl-named gulp-livereload gulp-plumber gulp-rename gulp-uglify gulp-util
这些包
cnpm install gulp gulp-if gulp-concat webpack webpack-stream vinyl-named
gulp-livereload gulp-plumber gulp-rename gulp-uglify gulp-util --save-dev
同时,还需要安装 `babel-loader、babel-core、babel-preset-env` 这三个包
cnpm install babel-loader babel-core babel-preset-env webpack --save-dev
这里安装的babel-loader包版本号高了有可能会报错,如果报错提示是版本号高了的话,输入 cnpm install babel-loader@7.1.5
降低版本号
代码:
/*
处理js的构建脚本
所有的构建脚本一定是放在tasks目录下的
*/
//引入这个脚本所依赖的包
import gulp from 'gulp