如何避免在 Webpack 构建中捆绑模拟模块？

Question

我们正在努力使我们的 React + GraphQL 项目独立于生态系统中的任何其他层，以改善开发人员体验。为此，我们编写了一个瘦 HOC，它包装了 Apollo 自己的graphqlHOC，并使用内部环境变量在网络获取和模拟数据之间切换。在生产版本中，所有模拟数据显然都没有使用，即使它被 import编辑。

有什么方法可以避免在 Webpack 的生产包中包含您知道不需要的模块，同时保持其他所有内容相同/不破坏应用程序？

像动态import() 这样的东西可以解决问题，但最终会分块你的构建而不是省略你不需要/不想要的东西。

更新：该应用程序是使用create-react-app 创建的 1.0.17，后来被弹出。

Answer 1

我正在使用以下目录结构。

api
  index.js
  apimock.js
  apirest.js

在 index.js 中，您根据 NODE_ENV 切换实现：

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./apirest');
} else {
  module.exports = require('./apimock');
}

你需要使用 webpack DefinePlugin 来设置 NODE_ENV：

new webpack.DefinePlugin({
  'process.env': {
    NODE_ENV: `"${process.env.NODE_ENV || 'development'}"`,
    ENABLE_DEVTOOLS: JSON.stringify(!!process.env.ENABLE_DEVTOOLS)
  }
})

构建命令（npm 脚本）：

NODE_ENV=production webpack --config webpack.config.js

或模拟实现：

NODE_ENV=development webpack --config webpack.config.js

Webpack 只会根据 NODE_ENV 捆绑单个实现。

在您的组件 (saga...) 中，您只需导入 api：

import * as api from 'api';