本文将介绍如何使用 plantuml-file-loader 作为一个简单的 Webpack 加载器，来编译 PlantUML 文件，并生成在线可视化的 UML 图形。
前置知识
什么是 PlantUML？
PlantUML 是一种文本绘图软件，可以创建 UML 图形、流程图、时序图等多种类型的图形，它的图形表示语言是基于非常直观的语法和关键字的。
什么是 Webpack？
Webpack 是一个现代 JavaScript 应用程序的静态模块打包器，它对代码进行静态分析，并且能够生成一个或多个质量高、分离良好的代码包。
安装和配置
让我们从安装 plantuml-file-loader 开始。
npm install -D plantuml-file-loader
安装完成后，需要在 Webpack 配置文件中进行一些配置。我们需要指示 Webpack 使用 plantuml-file-loader 加载 PlantUML 文件。
-- -------------------- ---- -------
-----
------- -
------ -
-----
-
----- ----------
---- ----------------------
-
-
-
-----这样做之后，Webpack 便可以通过配置的加载器，对以 .puml 结尾的文件进行编译，并且生成 .svg 图片和 HTML 文件。
如何使用
现在你已经将 plantuml-file-loader 配置好了，我们来看一下如何在我们的应用程序中使用它来编译 PlantUML 文件。
导入你的 .puml 文件
首先，导入你的 .puml 文件。在你的代码中，导入文件并且将其作为字符串引入到你的 JavaScript 文件中，如下：
import myClassDiagram from './class_diagram.puml';
通过简单的 HTML 文本显示
为了显示 PlantUML 输出内容，我们可以通过创建一个简单的 HTML 文件，加载 SVG 文件来展示 PlantUML 图形。你可以使用类似如下的代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ------------ ------- --------------- ------- ------ ---- ------------------------ ------- -------
结合示例代码
为了展示 plantuml-file-loader，在下面的示例中我们将用一个简单的官方 PlantUML 示例来演示这一过程。这个示例是一个银行账户管理系统的类图。
index.js
-- -------------------- ---- ------- -- ---- ------ ---------------- ---- ---------------------------- -- -- --- -- ----- --- - ------------------------------ ------- - ------------------------- -- - ---- --- --- -- ------------------------------------------------
bank-account-model.puml
-- -------------------- ---- ------- --------- ----- ----------- - --------- --- - - ---------------- ---- ----------------- ---- -------------- --- ------------ ------ - ----------- --- ---------------- -- --------------- -- -------------- ------- -------
运行示例
最后，你可以在命令行中运行 Webpack：
npx webpack --mode development
然后打开自己的 index.html 文件和在浏览器中预览自己的类图即可。
总结
在本文中，我们介绍了 plantuml-file-loader，并展示了如何在 Webpack 中使用它来编译 PlantUML 文件。我们还演示了如何在你的应用程序中使用 SVG 图像来显示生成的已编译的 PlantUML 图形。通过使用 plantuml-file-loader，你可以轻松地使用 PlantUML 并在你的应用程序中迅速地集成绘图解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f5d9381d61a3540eb5