如何在 React with Webpack 中使用 CommonJS 模块？答案

【问题标题】：How to use a CommonJS module in React with Webpack?如何在 React with Webpack 中使用 CommonJS 模块？
【发布时间】：2018-10-15 10:24:09
【问题描述】：

我正在尝试安装这个 React 库： html-2-jsx

问题是，我不知道如何将它导入 React。描述说：

要使用 Node.js 模块，需要 ('htmltojsx') 并创建一个新实例。

当我尝试在 React 组件中只需要它时，ESlint 告诉我：

File 是一个 CommonJS 模块。它可以转换为 ES6 模块。

当然，当我尝试运行 Webpack 时，我得到了错误。

我在 Webpack 中遇到的错误：

 Can't resolve 'child_process' in 
 'C:\xampp\htdocs\codeigniter_cms\public\node_modules\xmlhttprequest\lib'

这类错误很少：

 Can't resolve 'fs' in 
 'C:\xampp\htdocs\codeigniter_cms\public\node_modules\cssstyle\lib'

如何做到这一点？老实说，我觉得有点奇怪，为 react 制作的库不支持 ES6 导入功能。

【问题讨论】：

你从 webpack 得到什么错误？
查看我的编辑，我添加了错误
您是否使用 VS Code 作为您的编辑器？我认为File is a CommonJS module 消息是 VS Code 的事情。如果是这样，这真的只是一个建议，你可以import htmltojsx from 'htmltojsx 而不是使用require()。只是一种较新的语法。
是的，我正在使用 Visual Code。关于导入：它有效，但仅当我实施 mpontus 在所选解决方案中建议的内容时
我的直觉是正在使用一些只能在 NodeJS 中工作的“节点”代码（或者可能只是“由 webpack 处理”），它正在生成警告/错误。我看到的是"exclude" : /node_modules/ 模式（在 webpack.config.js 中），以防止 webpack/babel 加载器查看您目录中的所有文件，而不仅仅是 your source 文件。但是你已经通过 stubing 一些节点模块来完成这项工作。

【解决方案1】：

尝试将其添加到您的 webpack 配置中：

module.exports = {
  ...
  node: {
    fs: 'empty',
    child_process: 'empty'
  }
};

您看到的警告与这些错误无关。如果您想修复警告，则可能需要一些有关警告发生位置的上下文。

【讨论】：