es6学习笔记（一）环境搭建
1.安装node.js。这个自行百度安装就好了，没什么说的，安装完配置环境变量。因为后面安装第三方包是要用到npm命令，装完node就等于安装完了npm
2.项目目录创建
mkdir es6
cd es6/
mkdir app
mkdir server
mkdir tasks
cd app/
mkdir css
mkdir js
mkdir views
ls
mkdir js/class
touch js/class/test.js
touch js/index.js
touch views/error.ejs 当做HTML使用
touch views/index.ejs
cd ../server/
npm install -g express
npm install -g express-generator
express -e . 使用ejs模板引擎 使用这个错误 说明你express没有安装好
npm install
clear
cd ../tasks/
mkdir util
touch util/args.js
clear
cd ../
npm init
y
touch .babelrc
touch gulpfile.babel.js
clear
这些命令都是在linux上操作的，那么在Windows怎么操作呢？其实新建文件夹，新建文件这些都可以在Windows操作，只有nmp开头的那些命令才需要在cmd执行，不过执行前需要cd到对应的目录。
3.添加脚本
在tasks/util/args.js脚本中编写如下代码
import yargs from 'yargs'; //区分开发环境和线上环境 const args = yargs .option('production', { boolean: true, default: false, describe: 'min all scripts' }) //修改文件自动编译 .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;
在tasks 文件夹下新建scripts.js文件，配置如下：
import gulp from 'gulp'; import gulpif from 'gulp-if'; import concat from 'gulp-concat'; import webpack from 'webpack'; import gulpWebpack from 'webpack-stream'; import named from 'vinyl-named'; import livereload from 'gulp-livereload'; import plumber from 'gulp-plumber'; import rename from 'gulp-rename'; import uglify from 'gulp-uglify'; import {log,colors} from 'gulp-util'; import args from './util/args'; gulp.task('scripts',()=>{ return gulp.src(['app/js/index.js']) .pipe(plumber({ errorHandle:function(){ } })) .pipe(named()) .pipe(gulpWebpack({ module:{ //loaders rules:[{ test:/\.js$/, loader:'babel-loader' // loader:'babel' }] } }),null,(err,stats)=>{ log(`Finished '${colors.cyan('script')}'`,stats.toString({ chunks:false })) }) .pipe(gulp.dest('server/public/js')) .pipe(rename({ basename:'cp', extname:'.min.js' })) .pipe(uglify({ compress:{properties:false}, output:{'quote_keys':true} })) .pipe(gulp.dest('server/public/js')) .pipe(gulpif(args.watch,livereload())) })
在tasks文件夹下创建处理模版的构建脚本pages.js
import gulp from 'gulp'; import gulpif from 'gulp-if'; import livereload from 'gulp-livereload'; import args from './util/args'; gulp.task('pages',()=>{ return gulp.src('app/**/*.ejs') .pipe(gulp.dest('server')) .pipe(gulpif(args.watch,livereload())) })
在tasks文件夹下创建处理CSS的构建脚本css.js
import gulp from 'gulp'; import gulpif from 'gulp-if'; import livereload from 'gulp-livereload'; import args from './util/args'; gulp.task('css',()=>{ return gulp.src('app/**/*.ejs') .pipe(gulp.dest('server/public')) })
在tasks文件夹下创建处理服务器的构建脚本server.js
import gulp from 'gulp'; import gulpif from 'gulp-if'; import liveserver from 'gulp-live-server' import args from './util/args'; gulp.task('server',(cb)=>{ if(!args.watch) return cb(); var server = liveserver.new(['--harmony','server/bin/www']); server.start(); gulp.watch(['server/public/**/*.js','server/views/**/*.ejs'],function(file){ server.notify.apply(server,[file]) }) gulp.watch(['server/routes/**/*.js','server/app.js'],function(){ server.start.bind(server)() }) })
在tasks文件夹下创建浏览器监听相关文件
import gulp from 'gulp'; import gulpif from 'gulp-if'; import gutil from 'gulp-util'; import args from './util/args'; gulp.task('browser',(cb)=>{ if(!args.watch) return cb(); gulp.watch('app/**/*.js',['scripts']); gulp.watch('app/**/*.ejs',['pages']); gulp.watch('app/**/*.css',['css']); });
在tasks文件夹下创建清空制定文件clean.js
import gulp from 'gulp'; import del from 'del'; import args from './util/args'; gulp.task('clean',()=>{ return del(['server/public','server/views']) })
在tasks文件夹下创建build.js，把所有任务关联起来
import gulp from 'gulp'; import gulpSequence from 'gulp-sequence'; gulp.task('build',gulpSequence('clean','css','pages','scripts',['browser','server']));
在tasks文件夹下创建default.js
import gulp from 'gulp'; gulp.task('default',['build']);
配置.babelrc 文件
{
"presets":["es2015"]
}
配置gulpfile.babel.js文件
import requireDir from 'require-dir';
requireDir('./tasks');
打开server文件夹下的app.js文件，添加一行代码。如下图：
app.use(require('connect-livereload')());
4.安装各种包，请一定带版本号安装，不然又可能会出现版本和脚本不兼容，这些亲测可以启动。打开cmd，进入项目目录，执行安装以下包
npm install gulp@3.9.1 --save-dev --registry=https://registry.npm.taobao.org npm install gulp-if@2.0.2 --save-dev --registry=https://registry.npm.taobao.org npm install gulp-concat@2.6.1 --save-dev --registry=https://registry.npm.taobao.org npm install webpack@4.35.3 --save-dev --registry=https://registry.npm.taobao.org npm install webpack-stream@5.2.1 --save-dev --registry=https://registry.npm.taobao.org npm install vinyl-named@1.1.0 --save-dev --registry=https://registry.npm.taobao.org npm install gulp-livereload@4.0.1 --save-dev --registry=https://registry.npm.taobao.org npm install gulp-plumber@1.2.1 --save-dev --registry=https://registry.npm.taobao.org npm install gulp-rename@1.4.0 --save-dev --registry=https://registry.npm.taobao.org npm install gulp-uglify@3.0.2 --save-dev --registry=https://registry.npm.taobao.org npm install gulp-util@3.0.8 --save-dev --registry=https://registry.npm.taobao.org npm install yargs@13.3.0 --save-dev --registry=https://registry.npm.taobao.org npm install gulp-live-server@0.0.31 --save-dev --registry=https://registry.npm.taobao.org npm install del@5.0.0 --save-dev --registry=https://registry.npm.taobao.org npm install babel-loader@7.1.5 --save-dev --registry=https://registry.npm.taobao.org npm install babel-core@6.26.3 --save-dev --registry=https://registry.npm.taobao.org npm install babel-preset-env@1.7.0 --save-dev --registry=https://registry.npm.taobao.org npm install webpack-dev-server@3.7.2 --save-dev --registry=https://registry.npm.taobao.org npm install require-dir@1.2.0 --save-dev --registry=https://registry.npm.taobao.org npm install babel-preset-es2015@6.24.1 --save-dev --registry=https://registry.npm.taobao.org npm install gulp-sequence@1.0.0 --save-dev --registry=https://registry.npm.taobao.org
5.安装完，执行gulp --watch 启动项目
6.测试
在view/index.ejs输入以下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
sss
<script src="/js/index.js" charset="utf-8"></script>
</body>
</html>
在/js/index.js输入以下代码
class Test{
constructor(){
this.a='test'
}
}
let test=new Test();
document.body.innerHTML=test.a;
在浏览器输入http://127.0.0.1:3000/
