zoukankan      html  css  js  c++  java
  • 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;
    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/

  • 相关阅读:
    数据库 连接(join)
    Linux top
    Game2048
    黑豆白豆问题
    1000个苹果10箱
    Jconsole
    八数码 Java实现
    两数之和
    磁盘调度算法
    常见应用网络层次
  • 原文地址:https://www.cnblogs.com/lystbc/p/11204392.html
Copyright © 2011-2022 走看看