Taro项目搭建之区分开发、测试、线上各环境

[ithack]

需求只涉及微信小程序，这里仅以小程序为例介绍。 具体搭建过程参照官网目录 快速开始，搭建完成后使用命令npm dev:weapp运行、npm run build:weapp进行打包。 查看package.json可知，npm dev:weapp命令内容实际上是运行npm run build:weapp加上--watch。

需解决问题： 开发时需使用开发环境API请求接口、提交测试时需要使用测试环境API请求接口、上线时需要使用线上环境API请求接口；开发过程中可任意切换这三种环境进行本地调试。

Trao本身提供process.env.NODE_ENV进行区分开发和打包（线上）环境。显然，这并不能满足如上需求。 如下，笔者提供的解决方案：

打开文件package.json； 修改"build:weapp": "taro build --type weapp"为"npm build:weapp:dev": "cross-env BUILD_ENV=dev taro build --type weapp",; 修改"dev:weapp": "npm run build:weapp -- --watch",为"dev:weapp": "npm run build:weapp:dev -- --watch",; 添加命令"test:weapp": "npm run build:weapp:test -- --watch",、"prd:weapp": "npm run build:weapp:prd -- --watch",、"build:weapp:test": "cross-env BUILD_ENV=test taro build --type weapp",、"build:weapp:prd": "cross-env BUILD_ENV=prd taro build --type weapp"; 做了如上修改后，通过命令npm run dev:weapp 或者 npm run test:weapp 或者 npm run prd:weapp 运行项目即可，对应三种不同的开发环境。更重要的是，由于这些命令实际是对打包命令的引用，故上线前你只需执行npm run prd:weapp即可，执行此命令后亦可在本地进行代码修改等操作。

你以为这么做就成功了吗？？？ 做完以上修改后你会发现，在项目中根本无法获取到process.env.BUILD_ENV。经过在整个项目中进行关键字NODE_ENV搜索后，在项目文件config/index.js下做出如下更改：

module.exports = function(merge) {
  const buildConfig = {
    env: {
      BUILD_ENV: process.env.BUILD_ENV
    }
  };

  return merge(
    {},
    config,
    process.env.NODE_ENV === "development"
      ? require("./dev")
      : require("./prod"),
    buildConfig
  );
};

完结，撒花。