在这种情况下，如何在没有 React 的情况下使用 webpack？答案

【问题标题】：How can I use webpack without React in this case?在这种情况下，如何在没有 React 的情况下使用 webpack？
【发布时间】：2021-10-30 13:40:40
【问题描述】：

我创建了一个像这样的简单文件：

function Welcome() {
  return <h1>Hello, World</h1>;
}

但是，当我运行 webpack 时，它指出：

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.

要求我添加反应。

我想开发纯 JavaScript / JSX / XML / HTML / CSS 并使用 webpack 在没有 React 的情况下捆绑我的函数和类。

我该怎么做？

为什么 webpack 需要 React 来实现我的简单功能？

【问题讨论】：

因为你的函数是无效的javascript。 return '<h1>Hello, World</h1>'; 返回一个字符串。
因为它叫JSX，它既不是字符串也不是HTML。如果要使用纯js、html、css。不要使用 JSX，使用 .html 文件并捆绑 js 并在 HTML 中注入 script 标签。
我想使用 JSX。 JXS 是一种不仅仅与 React 一起使用的语言。这就是错误消息奇怪的原因。它们是两个不同的东西。

标签： javascript html xml webpack jsx

【解决方案1】：

您的用例可能仍需要@babel/preset-react。这个预设其实不限于处理 React JSX，一般都能处理 JSX。

您需要修改选项以满足您的需要。我从the doc 复制粘贴以下内容。注意"pragma": "dom" 和"pragmaFrag": "DomFrag" 部分。

{
  "presets": [
    [
      "@babel/preset-react",
      {
        "pragma": "dom", // default pragma is React.createElement (only in classic runtime)
        "pragmaFrag": "DomFrag", // default is React.Fragment (only in classic runtime)
        "throwIfNamespace": false, // defaults to true
        "runtime": "classic" // defaults to classic
        // "importSource": "custom-jsx-library" // defaults to react (only in automatic runtime)
      }
    ]
  ]
}

通过上述配置，您的代码将转换为：

function Welcome() {
  return dom("h", null, "Hello, World");
}

如果你使用这样的片段：

function Welcome() {
  return (
    <>
      <div>hello</div>
      <div>world</div>
    </>
  )
}

它会变成：

function Welcome() {
  return dom(
    DomFrag, null, [
      dom("div", null, "hello"),
      dom("div", null, "world")
    ]
  )
}

当然，您需要在源文件中提供并手动导入dom 和DomFrag。

【讨论】：

谢谢，我发现这很有用，但是应该有一个专门为 jsx 制作的 webpack “设备”？那是一个问题。奇怪的是，webpack 告诉我我需要 React for JSX，就好像它们捆绑在一起一样。
计算机科学中只有两个难点：缓存失效和命名。 -- Phil Karlton
从历史上看，它们是捆绑在一起的。 JSX 是由 React 团队“发明”的。但后来它被其他项目使用。
谢谢。你的函数 dom() 是 React 库的一部分吗？
没有。我在回答中说过：您需要在源文件中提供并手动导入dom 和DomFrag。 这两个只是随机变量名称。你需要带上自己的库。