taro 3.6.11 webpack5 env环境变量设置

[SilentFlute]

我第一次用taro是3.4.9, 那个时候是直接设置NODE_ENV以及在项目中直接使用process.env.xxx, 这回使用taro发现已经更新到了3.6.11, 于是尝试了下, 结果发现环境变量把我给难住了, 多方查找和尝试之后解决, 遂分享出来, 以期帮助到更多的人

以下是我个人处理环境变量问题的步骤:

1. 安装cross-env: yarn add cross-env --dev
2. 设置/修改package.json中的script, 例如:

{
  //...
  "scripts": {
    "dev:weapp": "cross-env PROJECT_ENV=development npm run build:weapp -- --watch",
    "production:weapp": "cross-env PROJECT_ENV=production npm run build:weapp",
    "test:weapp": "cross-env PROJECT_ENV=test npm run build:weapp"
  },
  //...
}

这里我设置了一个自己的环境变量, 叫PROJECT_ENV, 这个名字可以随意

3. 修改配置文件(这里只贴关键配置):

config/dev.ts:

module.exports = {
  env: {
    NODE_ENV: '"development"'
  },
  defineConstants: {
    BASE_URL: '"development"'
  },
}

config/prod.ts:

module.exports = {
  env: {
    NODE_ENV: '"production"'
  },
  defineConstants: {
    BASE_URL: '"production"'
  },
}

新建config/test.ts并写入如下内容:

module.exports = {
  env: {
    NODE_ENV: '"production"'
  },
  defineConstants: {
    BASE_URL: '"test"'
  },
}

然后还有最关键的一步: 修改config/index.ts中最末尾的内容:

module.exports = function (merge) {
  if (process.env.PROJECT_ENV === 'development') {
    return merge({}, config, require('./dev'))
  }

  if(process.env.PROJECT_ENV === 'test') {
    return merge({}, config, require('./test'));
  }
  
  return merge({}, config, require('./prod'))
}

4. 大功告成, 最后就是使用我们的环境变量, 确切的说是我们定义的常量:

console.log('process.env.NODE_ENV:', process.env.NODE_ENV);
console.log('BASE_URL:', BASE_URL);

各命令及其对应的打印结果如下:

	yarn dev:weapp	yarn test:weapp	yarn production:weapp
NODE_ENV	development	production	production
BASE_URL	development	test	production

然后需要注意的是, process.env.xxx的写法只能用于process.env.NODE_ENV, 其他时候会报错: process is not defined, 比如这里如果打印process.env.PROJECT_ENV就会报错了

以及这里我的NODE_ENV始终只有两个值: development和production, 是因为webpack5的mode就3个: string = 'production': 'none' | 'development' | 'production', 文档在这: https://webpack.js.org/configuration/mode/, 而且小程序打包, 我的预期是包尽可能的小以及各个依赖的行为应该更像生产环境, 毕竟我这里做区分主要是为了接口的baseUrl

以及貌似要把process.env.NODE_ENV设置为test也行, 此时修改config/test.ts中的NODE_ENV为'"test"'就行了, 此时yarn test:weapp的时候打印出来的process.env.NODE_ENV就是test了, 但这时候会看到终端中会输出一个这个:

Warnings:
=== '"production"'

同时也看不到这个了:

Tips:
1. 预览模式生成的文件较大，设置 NODE_ENV 为 production 可以开启压缩。
Example:
$ set NODE_ENV=production && taro build --type weapp --watch

那是不是意味着NODE_ENV其实还是production呢? 这我就不懂了, 希望了解的朋友能给解答一下, 感谢

相关帖子:
Taro v3.3.19 build H5 设置env development编译报错
Taro 3.5.7 无法获取到process变量

[bigmeow]

既然升级了就用这个吧。
https://docs.taro.zone/docs/env-mode-config

[SilentFlute]

哦哦, 好的, 感谢

我倒是没用过vue-cli, 接触vue的时候就已经是vue3 vite那一套了, 因为之前一直是写react的

用vite的时候用过mode, 那这里如果mode为test, 走.env.test文件中的配置, 那NODE_ENV的值就是test了, 这会影响一些包的打包行为吧?

还是可以像vite里一样在.env.test中定义NODE_ENV=production呢?

[bigmeow]

mode 不会改变 NODE_ENV 的值， 其实也不需要你去改NODE_ENV 的值， 默认情况下：

• 加了 --watch 参数的（开发时用）， NODE_ENV=development
• 不加 --watch 参数的（CI构建时用）， NODE_ENV=production
  所以你压根不用管 NODE_ENV

[SilentFlute]

嗯嗯, 我又看了看文档, 然后自己试了试, 编译配置是编译配置, 环境变量是环境变量, 二者分开, 确实是不用管NODE_ENV, 始终是开发是development, 打包就是production, 模式主要是处理其他的环境变量

感谢

不过为何新增了你提到的这个设置环境变量的功能, 而不是沿用之前的config/xxx.ts这种呢?

[SilentFlute]

自己尝试了下使用模式来设置环境变量, 这里也记录一下:

1. 保持@tarojs/cli生成的项目框架中的config不变(当然了, 可以设置自己需要的配置, 只要不动NODE_ENV就行)
2. 设置/修改package.json中的script, 例如:

//...
"scripts": {
  "dev:weapp": "npm run build:weapp -- --watch",
  "production:weapp": "npm run build:weapp -- --mode production",
  "test:weapp": "npm run build:weapp -- --mode test"
},
//...

3. 项目根目录中新建如下三个文件并写入相应内容:

.env.development:

TARO_APP_BASE_URL=modeDev

.env.test:

TARO_APP_BASE_URL=modeTest

.env.production:

TARO_APP_BASE_URL=modeProduction

4. 打印

console.log('process.env.NODE_ENV:', process.env.NODE_ENV);
console.log('process.env.TARO_APP_BASE_URL:', process.env.TARO_APP_BASE_URL);

命令	项目环境	编译配置	模式	环境变量文件	NODE_ENV值	TARO_APP_BASE_URL值
yarn dev:weapp	开发环境	config/dev.ts	development	.env.development	development	modeDev
yarn test:weapp	测试环境	config/prod.ts	test	.env.test	production	modeTest
yarn production:weapp	生产环境	config/prod.ts	production	.env.production	production	modeProduction