fis3-hook-relative

fis3 relative path support

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);

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

HomePage

https://github.com/fex-team/fis3-hook-relative

Repository

https://github.com/fex-team/fis3-hook-relative.git


上一篇:fis3-packager-deps-pack
下一篇:baidutemplate-x

相关推荐

  • 面试题:Hooks 与 React 生命周期的关系

    React 生命周期很多人都了解,但通常我们所了解的都是 单个组件 的生命周期,但针对 Hooks 组件、多个关联组件(父子组件和兄弟组件) 的生命周期又是怎么样的喃?你有思考和了解过吗,接下来我们将...

    10 个月前
  • 面试官: 聊一聊 HOC、Render props、Hooks

    在以前我们可能会看到很多文章在分析 HOC 和 render props, 但是在 2020 年 ,我们有了新欢 “hook” . 本篇文章会分析 hook , render props 和 HOC ...

    3 个月前
  • 通过简单的示例来理解React Hook

    This hook makes it easy to dynamically change the appearance of your app using CSS variables. You si...

    1 年前
  • 让你我不得不学习的React Hook

    1 什么是Hook 首先我们要明白的是React 16.8 的新增特性。它可以让我们在不编写 class 的情况下使用 state 以及其他的 React 特性。

    1 年前
  • 自定义 React Hook

    对于开发者来说,函数是对某一个功能的封装,那么 hook 就是对相同逻辑功能的封装。当你觉得重复在做一件事情的时候,那么你会把它封装成一个函数。同理,当你觉得在写重复的逻辑时,那么它就可以是一个 ho...

    5 天前
  • 结合React的Effect Hook分析组件副作用的清除

    一个订阅好友在线的组件 我们在DidMount的时候通过ID订阅了好友的在线状态 并且为了防止内存泄漏,我们需要在WillUnmount清除订阅 但是当组件已经显示在屏幕上时,friend pr...

    8 个月前
  • 终于搞懂 React Hooks了!!!!!

    (/public/upload/776f7115c905ba46eadd00ff62b8c272) (/public/upload/aa428a9f0941877303e5b6476eea...

    3 个月前
  • 精读《怎么用 React Hooks 造轮子》

    1 引言 上周的 精读《React Hooks》(https://github.com/dtfe/weekly/blob/master/79.%E7%B2%BE%E8%AF%BB%E3%80%8A...

    2 年前
  • 精读《React Hooks》

    1 引言 React Hooks 是 React 版本推出的新特性,想尝试的同学安装此版本即可。 React Hooks 要解决的问题是状态共享,是继 renderprops(https://...

    2 年前
  • 精读《React Hooks 最佳实践》

    简介 React 16.8 于 2019.2 正式发布,这是一个能提升代码质量和开发效率的特性,笔者就抛砖引玉先列出一些实践点,希望得到大家进一步讨论。 然而需要理解的是,没有一个完美的最佳实践...

    9 个月前

官方社区

扫码加入 JavaScript 社区