根据环境变量导入/导出

Posted 2023-02-19

【中文标题】根据环境变量导入/导出

【英文标题】：import/export according to environment variable

【发布时间】：2019-12-06 00:18:54

【问题描述】：

对于客户端应用程序，我想根据 package.json 中设置的环境变量选择特定的导入。

例如：`

if (process.env.IS_DEV)
    import  store  from '../../../index.js
 else
    import  store  from './index.js';

`

有没有办法做到这一点。 我目前收到错误 -

解析错误：'import' 和 'export' 可能只出现在顶层

【问题讨论】：

改用require怎么样？

【参考方案1】：

正如错误所说，import 只能在顶层。

如果您使用的是 webpack 或 parcel 等捆绑程序，则可以改用 require。

注意：这两个实现都将在包中，并且只会执行其中一个。

【参考方案2】：

如果您使用的是 web pack 1，您可以使用 web pack 动态导入来启用此功能

$ npm install babel-plugin-dynamic-import-webpack --save-dev

然后在.babelrc中

  "plugins": ["dynamic-import-webpack"]

https://github.com/airbnb/babel-plugin-dynamic-import-webpack

在较新版本的 webpack 中，你可以在没有 Babel 的情况下做到这一点

https://webpack.js.org/api/module-methods/#dynamic-expressions-in-import

前面提到的另一个解决方案是使用 require

但我认为在这里你可以用不同的方式来避免在捆绑结果中包含这些文件，你可以在构建 dist 之前添加构建脚本来运行，在将它捆绑到前端应用程序之前完全替换文件内的这个导入

【讨论】：

你会怎么做（在构建替换此导入的 dist 之前添加构建脚本以运行）？我正在使用故事书来呈现使用 store.getState()

的反应组件

例如，您可以有两个文件 script.prod.js 和 script.js 并在 package.json 的脚本部分添加执行命令 `mov script.prod.js script.js ' 如果环境变量值为生产

【参考方案3】：

也许更好地检查存储文件中的process.env.IS_DEV，并根据当前环境导出不同的值