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

@tanshenghu/http

v1.0.16

Published

简易版静态文件WEB服务器,支持跨域、代理、http、https服务

Downloads

84

Readme

Http Or Https Or Proxy


说明:

  • 周末闲得蛋疼就写了一个web http服务。
  • 启一个本地简易版静态服务:http 或 https服务
  1. 支持自定义端口http、https服务的启用(默认端口为:8080)
  2. 原创纯原生代码,无依赖,只有8KB
  3. 默认就支持跨域服务
  4. 支持SPA模式
  5. 支持指定某一个子目录当服务器根Root目录
  6. 默认支持include语法
  7. 支持proxy跨域代理
  8. 支持外部中间件扩展处理

安装

npm install @tanshenghu/http -g

应用

// 终端进入将要开启web服务的目录中,然后执行如下命令:
http

// 指定端口
http port=4444

// 开启https
http https

// 启用SPA模式(React)
http spa

// 指定项目子目录 dist 是当前目录下面的子目录
http dir=dist

// 支持跨域代理
http proxy=https://www.baidu.com

// 支持跨域代理 所有请求带token头 多个头信息用加号 + 分隔连接起来
// 加号与值左右都不能出现空格
// 如果某一些场景值有空格,请配置 tsh.httpconfig.js 文件加头信息
http proxy=https://www.baidu.com headers=content-type:application/json+token:userTokenValue

功能

// index.html
<html>
  <head>
    <title>DEMO</title>
  </head>

  <body>
    <!-- #include("/header.html"); -->
    <main>
      主干(Main)
    </main>
    <!-- #include("/footer.html"); -->
  </body>
</html>

// header.html
<header>
  <nav>
    <a>首页(Home)</a>
    <a>公司介绍(About)</a>
    <a>联系我们(Contact)</a>
  </nav>
</header>

// footer.html
<footer>
  <p>公司系统版权、站点备案号</p>
</footer>

tsh.httpconfig.js

// 在web服务根目录中添加一个 tsh.httpconfig.js 文件

module.exports = {
  onRequest: ({context, request, response}) {
    // ...
    if (request.url === '/home.html') {
      // Custom Page   自定义一个虚拟的 home.html 文件页面
      response.end('Hello 福虎 <[email protected]>');
      return false;
    }
  },
  onPath: ({context, pathname, request, response}) => {
    // 虚拟路径 url: /person/index.html   =>   /wwwRoot/author/tanshenghu.html
    return '/wwwRoot/author/tanshenghu.html';
  }
  onRender: async ({context, content, request, response}) => {
    // ...
    return '<h1>Custom HTML Content...</h1><h2>自定义的HTML文档内容,也可用于调接口数据动态渲染HTML做一个SSR服务</h2>';
  }
}

CHANGELOG

  • 1.0.12
  1. 将原来的扩展文件名 _middleTask.js 更改为 tsh.httpconfig.js
  2. 在扩展自定义配置文件各监听事件中添加一些内部Utils, 可以很方便的将 代理服务 集成到当前的http服务中
  3. 其它的一些内部调整优化
  • 1.0.13
  1. 主要是优化解决线程服务阻塞问题。因为将代理服务跟静态http服务集成之后,偶尔会有请求或代理阻塞问题的产生,倒置前端数据返回非常慢
  2. 站点 favicon.ico 的优化处理。以站点icon优先级最为高、其次再选用工具默认的icon
  • 1.0.14
  1. 主要是优化代理连接被拒的网络错误 ECONNREFUSED 解决线程服务阻塞问题。因为将代理服务跟静态http服务集成之后,偶尔会有请求或代理阻塞问题的产生,倒置前端数据返回非常慢甚至是进程假死状态
  • 1.0.15
  1. 扩展新的include语法结构,例如:<!--#include file="/child.html"--> 或者 <!--#include virtual="/child.html"--> 主要是为了支持Nginx与Apache的SSI功能,为了跟Nginx保持一致,所以在原有的基本之上新扩展一种语法结构。目前为止支持三种格式的include语法结构了
  2. 避免在页面中使用美元$符号,或者说合理注意点使用,由于js原生语法匹配问题。有个Bug,例如:
// 仔细看看下面这段代码的执行结果,可能是什么?
var msg = "hello, 福虎¥<tanshenghu>".replace("¥", "'$'");
console.log(msg);

这个匹配问题是可以通过各种手段方式处理的并且也属于语言本身的问题,所以这个Bug我暂时不会去解决,除非 有非常大的影响我就会考虑重写replace或手法一个类似于replace的方法来规避这问题

  • 1.0.16
  1. include单行正则的优化
  2. 自定义配置 config 中的 ResTypes 字段的继承优化处理

Appreciate

赞赏码

Author

TanShenghu [email protected] (福虎)