微前端构建一键启动

现成工具库:lerna
// lerna.json

{
  "packages": [
    "packages/*-front"  // 包含指定路径里面的包
  ],
  "version": "0.0.0",
  "command": {
    "run": {
      "npmClient": "yarn"  // 指定执行脚本用yarn/npm
    }
  }
}

package.json:

// package.json 里面的script
"start": "lerna run --scope package-1 --scope package-2  --parallel serve -- ",

package-1,package-2 为子应用,serve 为子应用启动的脚本命令,--后面带参数,比如
yarn start aaa,则会在子应用里面执行如下脚本:

yarn serve aaa


cli 命令 自定义脚本:

package.json ,指定bin

"bin": {
    "yarnT": "./bin/yarnT.js"
  },

安装包时,npm会检查package.json里面的bin配置,在bin对应的目录下建立一个对应系统path目录里的软链接,这样bin对应的命令就可以在系统生效

// yarnT.js

require("yargs").commandDir(commandPath)

commandPath文件夹里面包含自定义执行命令脚本文件,举例:
// start.js

//  用于cmd里面弹出可以让用户交互的选项
module.exports = {
    command: 'start',
    aliases: ['st'],
    desc: "开启微前端服务",
    handler: argv => {
         require('inquirer').prompt([
            {
                name: 'all',
                type: 'confirm',
                message: '是否启动全部',
                default: true
            },
            {
                name: 'list',
                type: 'checkbox',
                choices: [{name: "test", checked: true},......],
                message: '请选择需要的',
                when: (params) => {
                    return !params.all, // 当选择不启动全部的时候
                },
            }
        ]) .then(answers => {
            console.log(answers.all ,  answers.list)
        })


        require('child_process').spawn('yarn', ['start'], {
                stdio: 'inherit',
                cwd: path.resolve() //// 在指定目录下执行该命令
        })
 }

spawn方法可用于js执行cmd命令,支持多个子进程并发执行多个命令

注:但在windows里面有时会报如下错误:

spawn C:/windows/system32/cmd.exe enoent
可以引入require('cross-spawn')代替spawn去执行脚本命令

完整的库结构如下:
--- yarnT
---- bin
------- yarnT.js
---- lib
------- start.js
---- package.json

在库当前目录执行npm link,将该库链接成全局的可执行的命令 yarnT
在cmd 命令里面执行

yarnT start
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容