Webpack和ES6 - 条件导入和导出

Question

我有一些配置键，如下所示：

/config
  /db
    /dev.js
    /index.js
    /prod.js

我这样导入密钥：

import dbConfig from './config/db'

但是在index.js中，我使用CommonJS语法有条件地导出模块。是否可以用ES6来做？如果可以，怎么做？

module.exports = process.env.NODE_ENV === 'production'
  ? require('./prod')
  : require('./dev');

我正在使用 webpack ^4.6.0。尝试了 babel-plugin-dynamic-import-webpack，但它没有起作用。

我可能不知道一些最佳实践或插件可以使用，所以我很感谢您的想法。

- Mehmet N. Yarar

---

可能是如何有条件地导入ES6模块？的重复问题。 - Liam

我知道这篇文章，但它没有涵盖如何有条件地导出内容。建议的解决方案返回一个Promise，在解析或动态模块导入后进行导出时，Webpack会抛出错误。 - Mehmet N. Yarar

你可以使用 require 或 import（两者都适用于我），但如果你导入的模块使用了 export default，则需要访问 default 属性（例如 require('./prod').default）。 - TheLandolorien

Answer 1

我不相信你实际上需要担心这个问题。现代构建系统中有修剪树算法，应该确保您在开发或生产中最终只使用一个版本。

# mockValue.js
const mockValue = 'mock';

export default mockValue;

# realValue.js
const realValue = 'real';

export default realValue;

# test.js
import mockValue from 'mockValue';
import realValue from 'realValue';

let test;
if (process.env.NODE_ENV === 'production') {
  test = realValue;
} else {
  test = mockValue;
}

export default test;

# index.js
import test from 'test';

console.log(test);

在开发期间，应该修剪realValue。在生产版本中，应该修剪mockValue。为了验证这一点，您可以构建上面的测试项目并检查'mock'的输出（但您可能不会找到它）。

- Brandon Lee Detty