Question

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

有没有办法避免在Webpack的生产捆绑中包含模块您知道自己不需要，同时保留其他所有内容相同/不打破应用程序？

像dynamic 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。

在您的组件（传奇...）中，您只需导入api：

import * as api from 'api';

Answer 2

在webpack.config.dev.js：

中

16     2     3    13
 5    11    10     8
 9     7     6    12
 4    14    15     1

现在所有请求react-apollo的模块都会在编译dev时获得模拟。

我没有apollo-client，但这是一个模仿jQuery的例子：

您的代码：

webpack.dev.config.js：

resolve: {
  alias:{
    "react-apollo":"./mock.js"
  }
}

mock.js：

import $ from 'jquery';
console.log($().message)

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

2 个答案: