npm包内如何根据环境去导出的配置, 并且需要被tree shaking？

Question

我打算将一些配置统一存放至一个npm包中然后通过导出的形式去使用， 但是项目所使用的配置 开发环境和生产环境并不相同， 所以需要能够根据环境导出，并且最终的业务bundle 内也不包含非当前环境的配置信息， 也就是在生产环境下的项目最终打包内没有开发环境的配置信息

请问要实现这样有什么好的方案？

Answer 1

这个内容可以根据业务的场景在config文件中做一个对应的判断，比如线上环境的域名和线下环境不一致的问题，但是这个包只能在自己业务中使用了
如果是vue的项目或者固定是一个react项目的话，可以通过项目配置识别是否是测试环境还是线上环境
const isDev = 这里可以根据域名判断，可以process.env.NODE_ENV == 'development'，用一个三元表达式即可
export const domain = {
a: isDev ？ test.com : prod.com
}

Answer 2

经多次测试, 目前结果记录如下

方案一：

最终结果会受部分打包工具影响
而且引入时都得使用环境字段

测试代码：

const production = {
  domain: {
    a: "www.prod.com",
    fk: 'www.fk.com'
  },
  appid: {
    str: '开发str'
  }
}

const development = {
  domain: {
    a: "www.test.com",
    fk: 'www.fk.com'
  },
  appid: {
    str: '测试str'
  }
}



export default {
  production, 
  development
}

引用代码:

import config from "@xxx/config";

console.log("domain", config[process.env.NODE_ENV].domain.a);

打包结果：

rollup 和 webpack4：
粒度较粗
只tree shaking 到 config[process.env.NODE_ENV] 这层

webpack5:
粒度很细，很赞。
能够精确到 config[process.env.NODE_ENV].domain.a 这层， 也就是最终最终bundle内，连 fk 都不会被打进来，更别说appid了

不过项目得是webpack5, 很可惜公司用的不是

方案二：

好处是引入的地方很爽， 直接使用
问题是需要每个项目都配置webpack 还是有一定成本

npm 包导出两份js

分别为：

• lib/production.js
• lib/development.js

在业务端进行webpack 的 resolve 相应的配置，加载对应的 @xxx/config 文件包

该方案理论可行，但是未尝试