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

我们试图使我们的React + GraphQL项目独立于生态系统中的任何其他层，以改善开发人员的体验。与此相对应，我们编写了一个简洁的HOC，它包装了Apollo自己的graphql HOC，并使用内部环境变量在网络抓取和模拟数据之间切换。在生产版本中，所有模拟数据显然不被使用，即使它是是import ed。如何避免在Webpack构建上捆绑模拟模块？

有什么办法来避免包括的WebPack的生产束，你知道你的模块不会需要，同时保持一切相同的/没有违反程序？

喜欢的东西dynamic import()可以做的伎俩，但最终分块你的构建，而不是忽略了什么，你并不需要/想。

UPDATE：应用程序使用create-react-app1.0.17创建和后喷射。

来源

2017-11-25 Nicolás Fantone

是否有可能将模拟数据模块解析为生产中的空模块？ https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/webpack.config.prod.js – HMR

模拟apollo客户端返回您想要模拟的数据，本地解决当NODE_ENV ==='production'不为apollo提供模拟时，使用NODE_ENV env var在你的webpack.conf文件中将apollo添加到你的模拟模块中，让它遵循它的过程。这应该工作 –

@HMR我相信这将是一个直截了当的解决方案。任何想法如何处理？ –

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

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';

来源

2017-11-30 21:30:12 mauron85

这会工作。但不幸的是，在我们的场景中并不那么简单，因为数据层是通过Apollo的'graphql' HOC访问的。不过，你给了我一些想法。 –

在你webpack.config.dev.js：

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

现在所有模块请求作出反应，阿波罗编译时会得到模拟为dev。

我没有阿波罗的客户端，但这里是嘲讽的jQuery的例子：

您的代码：

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

webpack.dev.config.js：

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

嘲笑。js：

来源

2017-12-02 01:30:32 HMR

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

回答

相关问题