构建环境与平台

• 开发框架：Taro
• 目标平台：H5
• CDN 分发：七牛云
• CI / CD：Jenkins
• 版本管理：Git
• 开发环境：macOS Monterey

1. 设置编译模板

多渠道的应用必然会涉及到参数的动态配置，这一部分可以使用 process.env 设置环境变量

在 Taro 的底层已经对这一部分 Webpack 配置进行了封装，在配置文件的 env 变量直接设置即可；若使用 Webpack 可使用 .env 文件注入配置

个人使用 {#key} 作为变量插槽，此格式可自行替换

2. 编写 H5 编译脚本

2.1 安装依赖

包管理用 Npm 或 Yarn 都可以，这两者功能其实差异已经没那么大了，都做了缓存、锁文件，但 Yarn 在包获取与解析上个人体验存在优势，并且 Yarn 的指令更加语义化，故使用 Yarn 作为包管理工具。

Yarn 的指令似乎不支持管道，所以使用标准输入/输出流。

const standOutput = command => {
  execSync(command, { stdio: [0, 1, 2] }, (err, stdout) => {
    if (err) return console.log(err);

    console.log(stdout);
  });
};

const installDependencies = () => {
  console.log("📲 开始安装依赖");

  standOutput("yarn -v");

  execSync("yarn install", { cwd: rootPath, stdio: [0, 1, 2] });

  console.log("✅ 依赖安装成功");
};

2.2 注入代码

假设后端渠道配置信息如下

[
	{
      id: "1",
      appcode: "m",
      bucket: "m"
  }
]