如何在React（Webpack环境）中使用CommonJS模块及导入html-2-jsx库

我来帮你搞定这个导入htmltojsx的问题，你遇到的ESLint提示和Webpack报错其实是相关的，咱们一步步拆解解决：

问题根源 #

首先得明确：htmltojsx原本是为Node.js环境开发的库，用的是CommonJS规范（也就是require那套），而React项目一般用ES6模块（import/export）。另外，这个库依赖了Node.js的内置模块child_process，浏览器环境根本没有这个模块，所以Webpack打包的时候就会报错。

一步步解决 #

1. 改用ES6模块语法导入 #

先确保你已经正确安装了库：

npm install htmltojsx --save
# 或者用yarn的话
yarn add htmltojsx

然后别再用require了，换成ES6的import，用法和原来差不多，只是语法变了：

import HtmlToJsx from 'htmltojsx';

// 先创建转换器实例，还可以加一些配置项
const converter = new HtmlToJsx({
  indent: 2, // 缩进空格数
  createClass: false // 不需要生成React类组件的话设为false
});

function MyReactComponent() {
  const rawHtml = '<div><h1>Hello from HTML</h1><p>Some paragraph</p></div>';
  // 把HTML转成JSX字符串
  const jsxString = converter.convert(rawHtml);

  // 注意：convert返回的是字符串，如果要直接渲染，要么用dangerouslySetInnerHTML，要么把字符串转成可执行的JSX
  // 这里先给个最简单的dangerouslySetInnerHTML示例
  return (
    <div dangerouslySetInnerHTML={{ __html: rawHtml }} />
  );
}

export default MyReactComponent;

这样ESLint的提示就会消失，因为你用了符合项目规范的ES6模块语法。

2. 修复Webpack的child_process报错 #

因为htmltojsx里用到了Node.js专属的child_process模块，浏览器没有，所以我们要告诉Webpack忽略这个模块：

• 如果是自己配置的Webpack，在webpack.config.js里加这段：

module.exports = {
  // 其他配置...
  resolve: {
    fallback: {
      "child_process": false // 告诉Webpack这个模块不存在，直接忽略
    }
  }
};

• 如果是Create React App创建的项目，不能直接改Webpack配置，要么执行npm run eject弹出配置（一旦弹出就改不回去了），要么用react-app-rewired来修改：
  1. 先装依赖：

  npm install react-app-rewired customize-cra --save-dev
  

  2. 在项目根目录新建config-overrides.js文件，写这段：

  const { override, addWebpackResolve } = require('customize-cra');
  
  module.exports = override(
    addWebpackResolve({
      fallback: {
        "child_process": false
      }
    })
  );
  

  3. 最后修改package.json里的脚本，把react-scripts换成react-app-rewired：

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }
  

3. 更省心的替代方案 #

如果觉得上面的配置太麻烦，其实可以换个专门为浏览器/React设计的HTML转JSX库，比如html-react-parser，它完全适配React环境，不需要处理Node.js模块的问题：

npm install html-react-parser --save

用法也更简洁，直接把HTML转成可渲染的JSX元素：

import parse from 'html-react-parser';

function MyComponent() {
  const rawHtml = '<div><p>直接渲染HTML转的JSX</p></div>';
  return <>{parse(rawHtml)}</>;
}

export default MyComponent;

总结一下 #

要么用ES6语法导入htmltojsx，再配置Webpack忽略Node.js模块；要么直接换用更适配React的html-react-parser，后者会更省心。

内容的提问来源于stack exchange，提问作者i.brod