让browserify接收命令行参数，在打包时parse yml配置文件

Posted 2021-01-19 xuanmanstein

功能需求：

　　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命令行，没啥花活。

 

现在基本实现目的了。就这样吧，稍微有点笨。