我可以在将其转换为简单的 HTML 字符串时使用 jsx 进行编写吗？答案

【问题标题】：Can I use jsx for writing while transpiling it to simple HTML strings?我可以在将其转换为简单的 HTML 字符串时使用 jsx 进行编写吗？
【发布时间】：2021-04-14 16:46:27
【问题描述】：

因为我不需要任何 SPA 功能，也不需要像 React/Preact 这样的框架或任何类似的东西，我的 dist 代码不得包含 React 的 CreateElement 或其等价物。

其实我是想这样用的：

const html = <div className="some-class">
  <span>something inside</span>
</div>

编译为：

var html = `<div class="some-class">
  <span>something inside</span>
</div>`

我检查了很多与 jsx、template-literals 和 jsx 到 html 编译相关的 babel 插件，但没有一个适用于这个用例。甚至有可能还是我必须在我的代码中使用模板文字？

【问题讨论】：

你为什么不简单地在第一种情况下写模板文字（它只有两个字符不同）？你需要 JSX 的哪些特性？
"我的 dist 代码不能包含 React 的 CreateElement 或它的等价物。" - 为什么不呢？这将是最简单的解决方案，拥有一个返回 html 字符串的 createElement 变体。
@Bergi 总的来说，我喜欢 JSX 的编写方式。它更舒适，语法突出显示是模板文字中没有的一个不错的功能。对于你的第二个问题：我只是不希望在我的应用程序不需要这些函数时产生开销
如果你有动态 JSX（带有属性或子变量的变量），你需要这样的函数——而且开销相当小。顺便说一句，如果您使用标记的模板文字（html`<…>`，例如these，但还有更多库），您通常甚至可以在其中获得语法高亮显示。
JSX 不是 HTML，所以不，如果没有某种函数调用，就无法做到这一点。话虽如此，如果您愿意使用库，则可以使用带有 (p)react 的 HTM。这是一个标记的模板库，允许您编写 JSX 而无需编译/构建步骤：github.com/developit/htm

标签： javascript webpack babeljs jsx template-literals

【解决方案1】：

所以你试图在 .js 文件中编写 JSX 语法（看起来很像 HTML，其实不是）。 JSX 使用 React.createElement 来制作以下组件，这在术语上需要 babel。

const html = <div className="some-class">
  <span>something inside</span>
</div>

因此，如果不使用 babel 或任何其他此类插件，您将无法做到这一点。

【讨论】：

我知道没有转译器是不可能的。我在问题中提到过。