webpack & ES6 - 有条件的导入和导出答案

【问题标题】：webpack & ES6 - conditional import and exportwebpack & ES6 - 有条件的导入和导出
【发布时间】：2018-04-19 11:48:10
【问题描述】：

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

/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 试试运气，但没用。

我可能不知道一些我可以使用的最佳做法或插件，所以我很感激你的想法。

【问题讨论】：

How can I conditionally import an ES6 module?的可能重复
我知道这篇文章，但它不包括如何有条件地导出。建议的解决方案返回一个承诺，当我在导入解析/动态模块后导出时，webpack 对我大喊大叫。
您可以使用require 或import（两者都对我有用），但如果您要导入的模块使用export default（即require('./prod').default），则需要访问default 属性)

标签： javascript webpack ecmascript-6

【解决方案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”的输出（但您不太可能找到它）。

【讨论】：