在前端开发中，我们经常要处理 HTML、CSS、JS 等多种技术栈。在处理 HTML 的时候，我们可能需要用到 JSX 或 SVG，而将它们放在 HTML 中的时候就需要使用 posthtml-jsx-svg 这个 npm 包了！
什么是 posthtml-jsx-svg
posthtml-jsx-svg 是一个能够将 JSX 或 SVG 内容解析成 HTML 标签，从而将它们嵌入到 HTML 文件中的 npm 包。
例子：原始的 JSX 内容
-- -------------------- ---- -------
------ ----- ---- -------
------ -------------- ---- ------------------
----- --- - -- -- -
-----
---------- -----------
---------- -- -- ------------
------
-
----- ------- - -
------
------
--------- ---------------
-------
------
----------------------------------- ----
-------
-------
-如何使用 posthtml-jsx-svg
启用 posthtml-jsx-svg 的方法非常简单，首先我们需要在项目中安装这个库，在终端输入以下命令：
npm install posthtml-jsx-svg --save-dev
安装完成以后，我们需要在项目根目录下创建一个 posthtml.config.js 文件。该文件是 posthtml 的配置文件，我们可以在其中指定我们需要使用的插件、模板等。
在 posthtml.config.js 中安装 posthtml-jsx-svg：
const jsxSvg = require('posthtml-jsx-svg')
module.exports = {
plugins: [
jsxSvg()
]
}此时，你就已经成功地将 posthtml-jsx-svg 应用到你的项目中了！
如何进行转换
我们可以通过以下示例代码来了解如何将 JSX 转换成 HTML。假设我们有以下 JSX 代码：
-- -------------------- ---- -------
----- ------- - -- -- -
----- ------- --------- - -----------
----- ----------- - -- -- -------------- - --
------ -
-----
----------------
------- --------------------------- ------------
------
-
-我们可以将其转化为 HTML：
<div> <h1>0</h1> <button>Click me!</button> </div>
再以人类可读的形式显示出来：
<div> <h1>0</h1> <button>Click me!</button> </div>
以上便是本文的全部内容。希望读者能够通过本文学习到 posthtml-jsx-svg 包的使用方法，从而更加方便地将 JSX 和 SVG 嵌入到 HTML 文件中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005630081e8991b448e0d7d