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

因需求只涉及微信小程序,这里仅以小程序为例介绍。
具体搭建过程参照官网目录 快速开始,搭建完成后使用命令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进行区分开发和打包(线上)环境。显然,这并不能满足如上需求。
如下,笔者提供的解决方案:

  1. 打开文件package.json;
  2. 修改"build:weapp": "taro build --type weapp""npm build:weapp:dev": "cross-env BUILD_ENV=dev taro build --type weapp",;
  3. 修改"dev:weapp": "npm run build:weapp -- --watch",为"dev:weapp": "npm run build:weapp:dev -- --watch",;
  4. 添加命令"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
  );
};

完结,撒花。

你可能感兴趣的:(Taro项目搭建之区分开发、测试、线上各环境)