前言
在前端开发中，我们经常需要将网页或组件分为多个页面或模块进行开发。但是，如果每次修改某个模块的 html 内容时都需要手动更新其依赖模块的模板引用，那么我们的工作量会倍增。实际上，使用 jade-linker 这个 npm 包可以轻松实现自动化的模板引用更新，从而节省我们的时间和精力，提高开发效率。
安装
首先，我们需要安装 jade-linker 这个 npm 包。在命令行中输入：
npm install jade-linker -g
当然，如果你想将其局部安装，可以用：
npm install jade-linker --save-dev
使用
安装完毕后，我们就可以通过以下命令来使用 jade-linker：
jadelink -w <input_dir> -o <ouput_dir>
这个命令中，-w 参数指定输入目录，-o 参数指定输出目录，即：
-w src/views -o dist/views
这个命令的效果是将 src/views 目录下所有的 .jade 文件中的依赖替换成编译后的实际 html 文件，并将其输出到 dist/views 目录下。
示例代码
我们来看一个例子：
src/views/base.jade
include header include footer div.container block body
src/views/index.jade
extends base block body h1 Hello, jade-linker! p How are you doing? include scripts
src/views/header.jade
nav.topbar-menu
ul.menu
li
a(href="/") Home
li
a(href="/about") About
li
a(href="/contact") Contactsrc/views/footer.jade
footer.footer span Copyright © 2022
src/views/scripts.jade
script(src="/js/jquery.min.js") script(src="/js/bootstrap.min.js")
运行以下命令：
jadelink -w src/views -o dist/views
这个命令就会将以上五个 .jade 文件转为以下对应的 .html 文件：
dist/views/base.html
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------
----- ----------------------------- -----------------
-------
------
---- ------------------
--- ---- --
------
-------
-------dist/views/index.html
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------
----- ----------------------------- -----------------
-------
------
---- ------------------
---------- -----------------
------ --- --- ----------
------
------- ---------------
--------------- - ----
---------
------- ---------------------------------
------- ------------------------------------
-------
-------dist/views/header.html
-- -------------------- ---- -------
---- --------------------
--- -------------
----
-- -----------------
-----
----
-- -----------------------
-----
----
-- ---------------------------
-----
-----
------dist/views/footer.html
<footer class="footer"> <span>Copyright © 2022 </footer>
dist/views/scripts.html
<script src="/js/jquery.min.js"></script> <script src="/js/bootstrap.min.js"></script>
通过上面的转换，我们可以看到 jade-linker 将原本分散的 .jade 文件自动合并到了对应的 .html 文件中。这对于前端开发来说，是一个非常方便的工具，也是我们不容错过的 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/77785