gulp、webpack、package.json打包编译的相关内容

• package.json相关

  1. package的生命周期
  2. pretest 预处理 pre执行任务以前
  3. npm run env 查看环境变量
  4. echo $LOGNAME 输出环境变量 用$
  5. config:{} 配置其余的环境变量 $npm_package_config_port
  6. && 并行 用来运行多个任务 & 是穿行
  7. exit 1 // 1. 有错退出 0. 正常退出
  8. npm-run-all --parallel test dev //管理多个任务
  9. 一套完美的 script

  - 'test': '' //测试服务
  - 'start': '' //启动服务
  - 'build': '' //编译
  - 'docs': '' //文档的生成
  - 'server:start': 'cross-env NODE_ENV=development supervisor ./app.js' 启动服务
  - 'server:dev': 'cross-env NODE_ENV=development gulp' //开发的后端  编译后端
  - 'server:prod': 'cross-env NODE_ENV=production gulp' //后端上线的js
  - 'server:hint': 'cross-env NODE_ENV=hint gulp' //对js脚本进行校验
  - 'client:dev': webpack--mode development //开发的前端
  - 'client:prod': webpack--mode production //前端的上线
  复制代码

  10. npm-run-all包简化任务, 方便管理多个任务 直接写key便可 添加参数--parallel 实现并行
  11. scripty 包来美化, 清洁 package.json
      • 新建文件夹scripts 用来存放全部的shell脚本 根据冒号来建立例如 scripts/server/start.sh
      • npm install--save -dev scripty
      • 将命令写入对应的shell脚本就能够了 开头标注shell脚本#!/usr/bin/env sh
      • 修改package.json 例如 'server:start’:'scripty '
      • 修改权限 chmod a + x

• 检查80端口是否冲突

base_port="80"
    check_port= `lsof -i:${base_port} | awk '{print $2}'` 
    while ["$check_port" != ""]
    do
        let base_port=base_port+1
        check_port= `lsof -i:${base_port}` 
    done
    echo ${base_port}
复制代码

• shelljs包 用js 去书写shell 开头标注 #!/usr/bin/env node

• gulp相关 编译server

  • 目标

    • 开发环境
    • 上线代码
    • 清晰流
    • 代码校验

  • 实现的相关包以及坑

    1. gulp gulp-babel gulp-watch 进行编译
    2. @babel/plugin-transform-modules-commonjs 编译 import
    3. gulp-rollup (注意output: {format: 'cjs'}) rollup-plugin-replace
    4. 新建.eslintrc gulp-eslint

  • 参考

    • 使用gulp 编译
    • gulpfile.js
      • npm install gulp gulp-babel gulp-watch @babel/plugin-transform-modules-commonjs --save-dev
      • npm install rollup-plugin-replace --save-dev
      • npm install gulp - eslint--save - dev

const gulp = require("gulp");
        const gulp = require("gulp-babel");
        const watch = require("gulp-watch");
        const rollup = require("gulp-rollup");
        const replace = require("rollup-plugin-replace");
        const eslint = require("gulp-eslint");
        const entry = "./src/server/**/*.js";
        //须要清洗的代码
        const cleanEntry = "./src/server/config/index.js";
        //开发环境
        function builddev() {
            return watch(entry, {
                ignoreInitial: false
            }, function() {
                gulp.src(entry)
                    .pipe(babel({
                        //关闭外部的babelrc
                        babelrc: false,
                        "plugins": ["@babel/plugin-transform-modules-commonjs"]
                    }))
                    .pipe(gulp.dest('dist'))
            })
        }
        //上线环境
        function buildprod() {
            return gulp.src(entry)
                .pipe(babel({
                    //关闭外部的babelrc
                    babelrc: false,
                    ignore: ["./src/server/config/*.js"],
                    "plugins": ["@babel/plugin-transform-modules-commonjs"]
                }))
                .pipe(gulp.dest('dist'))
        }
        //清洗流
        function buildconfig() {
            return gulp.src(entry)
                // transform the files here.
                .pipe(rollup({
                    plugins: [
                        replace({
                            'process.env.NODE_ENV': JSON.stringify('production')
                        })
                    ],
                    output: {
                        format: 'cjs'
                    }
                    input: cleanEntry
                }))
                .pipe(gulp.dest('./dist'))
        }
        //代码校验
        function buildhint() {
            return gulp.src(entry)
                .pipe(eslint())
                .pipe(eslint.format())
                .pipe(eslint.failAfterError());
        }
        let build = gulp.series(builddev)
        if (process.env.NODE_ENV == "production") {
            build = gulp.series(buildhint, buildprod, buildconfig)
        }
        if (process.env.NODE_ENV == "hint") {
            build = gulp.series(buildhint)
        }

        gulp.task("default", build);
复制代码

• webpack相关 处理web

  1. npm install webpack webpack-cli -g --save-dev

  2. 配置webpack.config.js

     • 新建文件夹 config 存放 webpack的配置
       • webpack.development.js
       • webpack.production.js
     • 根据不一样的环境引入不一样的js
       • process.argv 获取系统参数[执行环境, 执行命令位置, --mode, development]

         

       • yargs-parser 将数组转化为 { key: value}形式
       • webpack - merge 合并配置
     • 编译
     • views下根据路由建立对应的 HTML骨架

       

     • glob 找到全部的 * .entry.js -
     • 参考

const argv = require("yargs-parser")(process.env.slice(2));
    const _mode = argv.mode || "development";
    const _mergeConfig = require( `./config/webpack.${_mode}.js` );
    const merge = require("webpack-merge");
    const glob = require("glob");
    const files = glob.sync("./src/web/views/**/*.entry.js");

    for (let item of files) {
        if (/.+\/([a-zA-Z]+-[a-zA-Z]+)(\.entry\.js$)/g.test(item) == true) {
            const entryKey = RegExp.$1;
            //html-plugin
            //注册插件 html-plugin 送到dist以前拦截 插入静态资源
        }
    }
    let _entry = {};

    let webpackConfig = {
        entry: _entry
    };

    module.exports = mrege(webpackConfig, _mergeConfig);
复制代码

未完待续....