从生产构建 webpack 中排除 node_module/package答案

【问题标题】：Exclude node_module/package from production build webpack从生产构建 webpack 中排除 node_module/package
【发布时间】：2018-06-18 14:09:03
【问题描述】：

我正在开发一个使用 "webpack": "^2.4.1", 的项目，它是一个 ReactJS 项目，我已经安装了模块 airbnb/prop-types-exact，我将此包用于开发目的，我不希望用户使用我的组件写入将不存在的属性传递给该组件。

当我为生产构建应用程序时，我想删除这个包。我正在使用Webpack Bundle Initializer 查看airbnb/prop-types-exact 的捆绑包大小，它并没有那么大，但我想将它从生产版本中删除，这可以实现吗？使用我正在使用的 webpack 版本还是使用后者？

我将不胜感激任何有关此的资源或想法，谢谢。

【问题讨论】：

您能否在您的package.json 中将包指定为devDependency？ docs.npmjs.com/files/package.json#devdependencies
是的，我已经在 dev 依赖项下安装了它
这个问题对我来说没有意义！如果您想删除任何构建中的依赖项，无论是生产还是开发，都不会导入它。

标签： reactjs webpack build production-environment

【解决方案1】：

下面这个Blog by Mark的例子

还有更多关于这些插件的参考： IgnorePlugin 和 DefinePlugin 我像他一样使用了插件，它们是IgnorePlugin 和UglifyJsPlugin，然后在我使用airbnb/prop-types-exact 包的组件中，我正在检查我所处的环境..

let exactProps ;
if (process.env.NODE_ENV === "development") {
    exactProps = require("prop-types-exact");
}

并且取决于exactProps是否有值，意味着require函数已经运行，意味着exactProps有来自prop-types-exact包的函数，我用这个函数包装了我的道具类型，.eg.

const propTypes = {
  someProp: PropTypes.iRequired
}

if (exactProps && typeof exactProps === "function") {
  MyComponent.propTypes = exactProps(propTypes);
} else {
  MyComponent.propTypes = propTypes;
}

最后我导出了 MyComponent 组件

export MyComponent

我打算将组件的道具类型的包装移动到一个通用模块中，以便它可以重用

【讨论】：