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

tianma-bundle

v1.0.0

Published

JS & CSS module bundler middleware for Tianma

Downloads

3

Readme

tianma-bundle

build status

将后续模块返回的JS或CSS文件依赖的其它文件按依赖顺序合并在一起后再返回。

安装

$ npm install tianma-bundle

使用

var tianma = require('tianma');

tianma(8080)
    .bundle()
    .static('./htdocs');

假设./htdocs目录下有以下JS和CSS文件:

+ htdocs/
    a.js
    b.js
    c.js
    a.css
    b.css
    c.css

JS文件依赖关系如下:

a.js -> b.js -> c.js

CSS文件依赖关系如下:

a.css -> b.css -> c.css

上例的执行结果如下:

$ curl http://127.0.0.1:8080/a.js
define("c.js", ...                  # 得到c.js,b.js和a.js按顺序合并后的内容
$ curl http://127.0.0.1:8080/a.css
.c {} ...                           # 得到c.css,b.css和a.css按顺序合并后的内容

依赖申明方式

JS使用CMD方式申明依赖,其中出现的所有模块ID应该与对应文件的路径一致。

define("foo/bar.js", [ "foo/baz.js" ], function (require, exports, module) {
    // ...
});

CSS使用@import语句和绝对路径(以/开头)申明依赖。

/* foo/bar.css */
@import "/foo/baz.css";

依赖去重

当依赖中存在重复文件时,重复的文件不会多次合并。例如有以下依赖关系:

a -> [ b, c ]
b -> d
c -> d

请求a时,得到的内容是d, b, c, a按顺序合并后的内容,其中d的内容仅出现一次。

循环依赖处理

循环依赖会被自动斩断。例如有以下依赖关系:

a -> b
b -> a

请求a时,得到的内容是b, a按顺序合并后的内容。反之,请求b时,得到的内容是a, b按顺序合并后的内容。

授权协议

MIT