正文
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: ,
describe: 'server port'
})
.argv
export default args;
args.js
在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()))
})
scripts.js
在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()))
})
pages.js
在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'))
})
css.js
在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)()
})
})
server.js
在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']);
});
browser.js
在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'])
})
clean.js
在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']);
default.js
配置.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/
![[基础]ES6编程艺术](https://www.04ip.com/template/qe/style/noimg/10.jpg "[基础]ES6编程艺术")
