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

【问题标题】：How to avoid bundling mock modules on Webpack build?如何避免在 Webpack 构建中捆绑模拟模块？
【发布时间】：2018-05-09 06:23:31
【问题描述】：

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

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

dynamic import() 之类的东西可以解决问题，但最终会分块您的构建，而不是省略您不需要/不想要的东西。

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

【问题讨论】：

是否可以将模拟数据模块解析为生产中的空模块？ github.com/facebookincubator/create-react-app/blob/master/…
模拟 apollo 客户端以返回您要模拟的数据，当 NODE_ENV==='production' 不提供模拟时，使用 webpack.conf 文件中的 NODE_ENV env var 将 apollo 本地解析为模拟模块对于阿波罗来说，让它顺其自然吧。这应该工作
@HMR 我相信这将是一个直接的解决方案。关于如何解决这个问题的任何想法？
@DayanMorenoLeon 我明白你的想法。它类似于下面给出的答案之一。在这种情况下，恐怕不是将一个模块与另一个模块交换那么简单。
@whitep4nther 想为 mauron85 提供赏金，但设置别名似乎是一种更简洁的解决方案（一个全局开关，而不是可能具有条件导入语句的许多文件）。明天我会检查，看看是否有人添加了答案。

标签： javascript reactjs webpack babeljs graphql

【解决方案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';

【讨论】：

这行得通。但不幸的是，在我们的场景中并不是那么简单，因为数据层是通过 Apollo 的graphql HOC 访问的。不过，你给了我一些思考。

【解决方案2】：

在你的webpack.config.dev.js:

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

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

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

您的代码：

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

webpack.dev.config.js：

alias:{
  "jquery":"./mock.js"
}

mock.js：

const org = require('../node_modules/jquery/src/jquery');
org.fn.message = "Hello from mock";
export default org;

【讨论】：