node-combo

2019-08-22 admin

node-combo是什么

什么是node-combo,nodejs的静态合并

node-combo使用教程帮助文档

node-combo

nodejs的静态合并

故事

http://www.xuexb.com/html/250.html

由于项目迭代开发,可能一直在改版, 如果使用grunt之类的工作进行合并,又有学习成本和维护成本, 但如果不压吧, 感觉B格又不高, 于是想想有没有一种可以在请求的时候去合并,压缩的, 起初看到大搜车的ads, 后来知道了美丽说也是这种模式, 于是就想试试用nodejs写一个类似这么个东东…然后…

只是想学学nodejs, 只是把我的想法实践出来罢了!

期望

最终要完成合并cmd模块, 普通文件, tpl->js, css->js, 配合CDN缓存使用达到上线不费劲的效果!

介绍

她是一个可以被动式合并你设置的资源, 让你可以抛弃那些略为复杂的打包, 上线机制, 从而达到开发人员只需要关心自己代码的境界!

普通的合并

这种通常可以满足你的需求了,可以把多个文件进行合并(前提是一个链接只能合并一种文件类型), 比如 demo.com/??test/a.css,test/b.css, 也或者 demo.com/??test/a.js,test/b.js, 但由于文件路径很长的原因导致整个链接可能很长,很长…

然后就在考虑是不是可以以子目录的方式进行合并?

子目录合并

这种可以使你先进入深的目录,再动态的合并文件, 比如 demo.com/test/test2/test3??a.css,b.css,c.css ,是不是略爽?

但如果一个链接里我目录既然深, 还会跨目录呢?

跨目录合并

先上"比如": demo.com/test/test2/test3/??a.css,b.css,/biede/c.css, 这种就可以解决跨目录的问题, 但我在想很反感, 通过seajsalias我在考虑链接能不能也"别名", 于是…

别名加载

例子:

alias: {
    'global': 'src/??seajs/sea,seajs/sea-style,seajs/sea-config,lib/dialog/base'
},

demo.com/??global 就相当于 demo.com/src/??seajs/sea,seajs/sea-style,seajs/sea-config,lib/dialog/base

cmd和非cmd

会判断js文件内是否有define关键字, 如果有则视为cmd文件, 可以添加file_no_cmd来显式的设置不是cmd

无缓存加载

正如你所想, 添加?, 如:

  • demo.com/??a.css,b.css?v=123
  • demo.com/??a.css,b.css?34234234
  • demo.com/src/xxoo??a.css,b.css?v=123
  • demo.com/src/xxoo/??a,b?v=123&type=css
  • demo.com/src/xxoo/??a,b?v=123&fdsfsd=1
  • demo.com/??别名?v=123

demo

合并css

  • demo.com/??test/a.css,test/b.css 普通的合并
  • demo.com/test/??a.css,b.css 以子目录合并
  • demo.com/test/??a,b?type=css 添加文件类型,可以替代文件后缀
  • demo.com/??global 别名方式
  • demo.com/??global?dfdfdf 别名方式
  • demo.com/test/??a.css,b.css,/test2/c.css 跨目录合并
  • demo.com/test/??a.css,b.css?4654 添加时间缀
  • demo.com/test/??a.css,b?4654 在没有显式的设置过type时省略的会补上第一个的类型

合并js

注:js会判断是否为cmd,如果是则会添加id并抽取依赖, uri是以子目录为基础来设置

  • demo.com/??test/a.js,test/b.js 普通的合并
  • demo.com/test/??a.js,b.js 以子目录合并
  • demo.com/test/??a,b?type=js 添加文件类型,可以替代文件后缀,默认typejs,如果没有显式的设置过type,则是以第一个文件的后缀为标准
  • demo.com/test/??a,b 默认文件类型
  • demo.com/??global 别名方式

请求处理流程

在捕获到页面请求后,经过这些处理:

  1. 判断是否有??存在,如果没有则认为需要nginx等服务器处理
  2. 判断??后的字符是否为别名(配置的alias), 如果有,则拿别名的值替换整个url
  3. 判断是否开启cache, 如果有则使用md5url读取缓存文件是否存在,如果存在,则直接输出并中断
  4. url进行分组,生成文件路径数组
  5. 遍历路径数组,判断文件是否存在,存在则调用相应的处理文件进行处理
  6. 处理文件,如cmd的生成
  7. 如果开启cache则写入缓存
  8. 数据输出

Nginx代理

建议使用nginxhttp代理,如果请求中包含??才交给node-combo处理,配置如下:

server {
    listen     80;
    server_name  127.0.0.1;

    location / {
        root   目标路径;
        index  index.html index.htm;
        autoindex on;
    }

    if ($request_uri ~* "\?\?"){
        rewrite (.*) /__combo;
    }

    location /__combo {
        proxy_set_header Connection "";
        proxy_set_header Host $http_host;
        proxy_set_header X-NginX-Proxy true;
        proxy_pass http://127.0.0.1:90$request_uri; 这里是node-combo跑的路径
        proxy_redirect off;
    }
}

配置

{
    base: './',//根路径
    cache: true,//是否开启缓存
    cache_path: './__cache',//缓存目录
    alias: {},//别名
    port: 80,//端口
}

使用

npm install node-combo

var combo = require('node-combo');

combo( [option] );

bug

提交

changelog

2.0.2

修改依赖

2.0.1

  • 文档完善
  • 支持在没有显式的设置type时使用第1个文件后缀为类型

2.0.0

  • 完成基本的功能并发布到npm

todo

  • demo
  • tpl->js的支持
  • css->js的支持
  • debug功能
  • cache管理
  • 压缩开关
  • jsHint
  • Etag?? CDN??

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-73225.html

文章标题:node-combo

回到顶部