Remax 解析参数并调用构建方法

428 阅读2分钟

编译在remax-cli中开始,并且首先调用的是run方法,传入进来的参数是输入的命令去掉多余字符

new RemaxCLI().run(process.argv.slice(2, process.argv.length));

入口文件在 /remax/packages/remax-cli/src/index.ts

获取配置

  1. 使用yargs-parser对象化命令行参数

    • const argv: any = require('yargs-parser')(args);
  2. 指定全局变量REMAX_PLATFORM编译平台

    • 从命令行 -t 或者 target读取
    • 平台默认是ali
    • process.env.REMAX_PLATFORM = argv.t || argv.target || 'ali';
  3. 读取remax配置文件remax.config

    • remax配置读取后使用schema-utils对配置进行类型判断,模板文件是/remax/packages/remax-cli/OptionsSchema.json
    • 读取remax默认配置并合并项目remax配置,项目配置优先级高,默认配置在/remax/packages/remax-cli/src/defaultOptions/index.ts
    • 去除配置中路径字段末尾正反斜杠
  4. 合并压缩配置

    • 首先读取remax配置中compressTemplate
    • 为空再读取命令行中的-m或者minimize

加载API

  1. API文件解读
    • API文件路径/remax/packages/remax-cli/src/API.ts
    • 其中包括很多参数、钩子函数、注册插件、加载插件等方法
    • 插件列表、插件名称、id等会缓存在/remax/packages/remax-build-store/src/index.ts创建的Store中
  2. 创建this.api = new API();并向API中注册加载remax配置文件中的remax插件

构建参数解析

  1. 初始化构建参数
    • 使用yargs工具包提供参数解析并提供参数说明
      • image.png
    • 编译项目使用 remax build -w -t ali
    • 编译插件使用 remax mini-plugin build -w -t ali
    • 查看帮助文档分别使用 remax build --help remax mini-plugin build --help
    • const cli = this.initCLI();
  2. API调用各个remax插件的extendCLI钩子函数,并将初始化好的构建参数传入进去,plugin.extendCLI({ cli }),在插件中可以修改cli中的参数
  3. 如果命令行没有参数传入,会给出编译提示并停止运行 image.png

执行开始编译方法

  1. cli.parse(args, callback)开始执行编译,根据不同的命令执行不同的编译
  2. 编译项目使用internalBuildApp方法,编译插件使用buildMiniPlugin方法
    • 这两个方法都在/remax/packages/remax-cli/src/build/index.ts
    • 都传入remax配置 和 构建参数
  3. 启动方法后会调用remax-stats给阿里上报数据 image.png