npm 包 ss-clientjade 使用教程

前言

ss-clientjade 是一个基于 Node.js 的 npm 包，用于将 Jade 模板中的静态资源链接转化为相对或绝对路径。这样可以方便前端开发人员在开发静态页面时，无需写繁琐的相对路径或绝对路径，减少出错的概率，提高开发效率。

安装

在调用 ss-clientjade 之前，须确保已在项目中安装 Node.js 和 npm 包管理工具。

在命令行中执行以下命令来安装 ss-clientjade：

npm install ss-clientjade

使用说明

引入 ss-clientjade

在 Node.js 项目中，通过以下方式引入 ss-clientjade：

const clientJade = require('ss-clientjade');

转化路径

相对路径

在 Jade 模板中，静态资源链接的相对路径为：

img(src="./images/image.png")

使用 ss-clientjade 将其转化为相对路径：

clientJade.toRelativePath('./index.jade', './index.html', './')

• 第一个参数 —— Jade 模板的路径，相对路径或绝对路径均可。
• 第二个参数 —— 最终生成的 HTML 文件路径，相对路径或绝对路径均可。
• 第三个参数 —— Jade 模板文件中包含的静态资源文件夹路径，相对路径或绝对路径均可。

生成的结果为：

img(src="images/image.png")

绝对路径

在 Jade 模板中，静态资源链接的绝对路径为：

img(src="/images/image.png")

使用 ss-clientjade 将其转化为绝对路径：

clientJade.toAbsolutePath('./index.jade', './index.html', 'http://www.example.com/')

• 第一个参数 —— Jade 模板的路径，相对路径或绝对路径均可。
• 第二个参数 —— 最终生成的 HTML 文件路径，相对路径或绝对路径均可。
• 第三个参数 —— 静态资源网站的根路径，注意结尾需添加斜线。

生成的结果为：

img(src="http://www.example.com/images/image.png")

演示示例

假设在项目中，存在以下文件夹结构：

project/
    images/
        image.png
    templates/
        index.jade
    build/
        index.html

index.jade 文件中包含以下内容：

doctype html
html
    head
        title Example
    body
        img(src="./images/image.png")

最终需要生成的 index.html 文件中，静态资源链接应该为：

-- -------------------- ---- -------
--------- -----
------
    ------
        ----------------------
    -------
    ------
        ---- -----------------------
    -------
-------

在 Node.js 项目中执行以下代码：

const clientJade = require('ss-clientjade');
clientJade.toRelativePath('./templates/index.jade', './build/index.html', './');

得到以下结果：

doctype html
html
    head
        title Example
    body
        img(src="images/image.png")

总结

使用 ss-clientjade 包可以大大提高前端开发人员的工作效率，在以 Jade 为模板的项目中，使用相对路径和绝对路径时不必担心路径错误的问题。此外，希望读者在使用 ss-clientjade 时，注意参数的传递顺序及值，避免出错。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/75842