npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

fis3-hook-relative

v2.0.3

Published

fis3 relative path support

Downloads

729

Readme

fis3-hook-relative

让 fis3 产出能够支持相对路径。

如何使用?

1. 安装插件

全局安装

npm install -g fis3-hook-relative

或者,局部安装

npm install fis3-hook-relative

2. 配置启动

// 启用插件
fis.hook('relative');

// 让所有文件,都使用相对路径。
fis.match('**', {
  relative: true
})

如何解决 html 性质文件,访问路径与实际服务端存放路径不一致,导致相对路径错误?

比如: /templates/xxx.tpl 发布到服务端后,是通过 http://domain.com/user 访问的,为了让 /templates/xxx.html 中的相对路径正确。请加上如下配置:

fis.match('/templates/xxx.tpl', {
  relative: '/user/' // 服务端访问路径
});

注意

如果 js 文件中有引用其他资源的情况。相对路径相对的其实不是 js 所在目录,而是页面所在目录。所以这块,如果要正确处理,也需要配置 relative 属性。

API

此插件还提供其他插件生成相对地址。如:

var message = {
  target: target, // 目标文件对象,或者目标文件的绝对 url
  file: file // target 相对的文件。
};
fis.emit('plugin:relative:fetch', message);

// 如果 fis3-hook-relative 开启了。
// 那么 message.ret 将返回 target 相对与 file 的相对路径。
console.log(message.ret);

因为其他插件与该插件是非耦合的,所以是通过发送事件的方式询问,如果起了该插件,那么监听此事件来处理相对路径。