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/