讓browserify接收命令行參數，在打包時parse yml配置文件

功能需求：

　　1用browserify把各類js打包成瀏覽器端的1個bundle.js，含有yml配置文件

約束：

      1 yml配置文件不在當前工程裏（如今還不知道放哪裏，之後也會變），但願在打包時，用命令行參數的方式傳入一個路徑，形如

--config=D:/dev/kiev1941/overlay.yml

     2這個配置文件在client.js開頭會require()，因此要打包進bundle.js

 

開始的破題思路是：

1 如何讓browserify  cli 接收argv，解析yml文件地址

2 如何在client.js開頭require(yml文件名)

第一輪搜索，讀資料後發現

1能夠變成，用代碼的方式運行browserify bundle過程。而不是browserify命令行工具。
也就是說，命令行方式的打包是：

"browserify ./src/client.js -o ./static/bundle.js -t [ babelify --presets[env]]"

這種裏面加命令行參數，和讀取內容，之類的callback比較困難。

可是，徹底能夠寫一個do_bundle.js文件：

const browserify = require('browserify');
//作cli參數解析，各類預處理工做
...
//打包過程代碼，代替browserify命令行
browserify('./src/client.js')
  .transform('babelify',{presets: ["@babel/preset-env"]})
  .bundle()
  .pipe(fs.createWriteStream("./static/bundle.js"));

而後這個js，因此能夠直接在package.json裏起1個node+命令行參數的運行任務：

"scripts": {
"build_browser": "node src/do_bundle.js --config=D:/dev/kiev1941/overlay.yml"
}

對於2 讀取、解析yml不難，但若是要在client.js 裏require()，可是

1若是cli傳入的名字不定，client.js怎麼知道這個yml名字呢？

2若是yml包含client.js不須要的配置內容，若是bundle.js，前端就有可能get到。這是咱們不但願的。該怎麼在bundle的「compile」階段作點什麼？

 

目前沒想到更好辦法，簡單加入1箇中間步驟。第二輪大概這樣：

do_bundle.js:

1用node +cli argv啓動，解析獲得yml文件名

2讀取yml內容，把client.js用到的字段拿出來，保存到給定名字的json臨時文件中。好比就"./define.json"

3 執行browserify的打包過程

client.js:

const config = require("./define.json");

完事。

這樣的好處，client.js即打包後browser端bundle.js最簡單。根本不知道define.json是怎麼弄出來的。

這樣，只須要do_bundle裏建立個臨時文件就好了，雖然有點醜，可是原本打包過程就是在後端，系統編程讀寫個臨時文件，算正常操做，不算難看。

const fs = require("fs");
const browserify = require('browserify');

//讀命令行參數
const yaml = require('js-yaml');
//const argv = require('yargs').argv;
const argv = require('optimist').argv;
console.log('argv', argv);
//讀yaml配置文件
const config = yaml.safeLoad(fs.readFileSync(argv.config,{encoding: 'utf8', flag: "r" }));
console.log('yaml config', config);
//選擇部分字段
const prop_name = 'define';
//保存到本地，供打包用./src/define.json
const f_name = `./src/${prop_name}.json`
fs.writeFile(f_name, 
            JSON.stringify(config[prop_name], null, 4), 
            { encoding: "utf8", flag: "w" },
            (err)=>{});

browserify('./src/client.js')
  .transform('babelify',{presets: ["@babel/preset-env"]})
  .bundle()
  .pipe(fs.createWriteStream("./static/bundle.js"));

幾個細節，yargs不知爲何，在這種模式下不能正確parse出arg，把--字段全都放在_:裏了，等於沒解析出來。

因此隨便換了一個optimist，用法功能都差很少。

讀yaml，寫json都沒啥可說的；

沒有用browserify系的 yamlify 和register之類的。這樣最簡單。基本徹底對應browserify命令行，沒啥花活。

 

如今基本實現目的了。就這樣吧，稍微有點笨。