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);
複製代碼

未完待續....