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

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

  • 相关阅读:
    八、基本数据结构(图形结构)
    七、基本数据结构(树形结构)
    4、使用 ImportTsv 将 Hive 数据导入 Hbase
    六、跳表
    五、二分法查找
    四、归并排序 && 快速排序
    一、kafka 介绍 && kafka-client
    三、排序之冒泡、插入、选择
    二、YARN
    三、synchronized & lock
  • 原文地址:https://www.cnblogs.com/xuanmanstein/p/9952146.html
Copyright © 2020-2023  润新知