flex-combo - npm Package Compare versions

Comparing version 0.6.6 to 0.6.7

package.json

 {
   "name": "flex-combo",
-  "version": "0.6.6",
+  "version": "0.6.7",
   "description": "The Flex-combo is combo tool designed for web front-end developer. It support various kinds of combo format by modify configuration(eg. yahoo combo).",
-  "main": "flex-combo.js",
+  "main": "index.js",
   "bin": {
     "flex-combo": "./bin/flex-combo"
   },
-  "directories": {
-    "test": "test"
-  },
   "dependencies": {
     "commander": "~2.5.0",
-    "crypto": "0.0.3",
-    "dac": "~0.1.9",
-    "debug": "~0.7.0",
-    "debug.log": "~0.0.3",
-    "iconv-lite": "~0.4.0",
+    "iconv-lite": "~0.4.4",
     "is-utf8": "~0.2.0",
     "mace": "~2.0.0",
-    "mime": "~1.2.11"
+    "mime": "~1.2.11",
+    "juicer": "~0.6.6-stable",
+    "less": "~1.7.5",
+    "node-sass": "~1.2.2"
   },
-  "devDependencies": {},
-  "scripts": {
-    "test": "node ./test.js"
-  },
   "repository": {
@@ -28,0 +20,0 @@ "type": "git",

README.md

@@ -0,1 +1,2 @@
+Flex Combo 介绍
 # Flex Combo 介绍
@@ -8,4 +9,4 @@
 在前端开发环境中，由于最终上线需要将资源引入的代码合并，从而无法在本地轻量开发调试，引起开发调试不便。
-Flex Combo是在开发环境模拟实现了此功能的服务器，目的是方便前端开发调试。约等于一个支持Combo语法，只能访问js/css及图片资源的Apache服务器。
-区别于生产环境的Combo。Flex Combo专为前端开发环境量身打造，舍弃部分高并发特性，从而提供了丰富的功能和轻量的体积。
+`Flex Combo`是在开发环境模拟实现了此功能的服务器，目的是方便前端开发调试。约等于一个支持Combo语法，只能访问js、css、iconfont等静态资源的Web服务器。
+区别于生产环境的Combo，`Flex Combo`专为前端开发环境量身打造，舍弃部分高并发特性，从而提供了丰富的功能和轻量的体积。
 
@@ -23,25 +24,14 @@ ## 安装
 
+首先，修改`hosts文件`，将需要代理的线上地址映射到本地，例如(`g.tbcdn.cn`)：
+
+````
+127.0.0.1   g.tbcdn.cn
 ```
-cd node_modules/flex-combo
-node ./test.js
+
+然后，在命令行启动`Flex Combo`
 ```
+sudo flex-combo
+```
+之后所有向`g.tbcdn.cn`发起的静态资源请求都将通过`Flex Combo`代理
 
-打开浏览器访问以下地址：
-`http://127.0.0.1:1337/test/js/??js1.js,js2.js,js3.js`
-
-## lib开发模式
-
-    var http = require('http');
-    var flexCombo = require('./flex-combo.js');
-    var comboInst = flexCombo(__dirname, {'/test': 'test'});
-    http.createServer(function (req, res) {
-        comboInst(req, res, function(){
-            res.writeHead(200, {'Content-Type': 'text/plain'});
-            res.end('Hello World\n');
-        })
-    }).listen(1337, '127.0.0.1');
-    console.log('Flex Combo Server running at http://127.0.0.1:1337/');
-
-以上，就在本地1337端口启动了flex-combo服务。
-
 ## 特性
@@ -56,9 +46,9 @@
 
-前端开发过程中，有时必须引入部分线上存在但本地工程无需关注的资源，例如网站全站范围统一使用的前端框架jQuery、Kissy等。
-Flex combo，遇到自己没有的资源时，会真正到线上服务器获取内容。Flex Combo会动态分析请求描述的文件列表。本地有的，采用本地内容返回，本地没有的，构造Combo请求到线上服务器获取内容。最后将本地内容和线上内容合并返回。这样做，保证最终上线后combo请求的内容顺序和调试期完全一致。
+`Flex Combo`会解析请求URL，分析出待处理文件列表。若本地存在对应文件，则读取本地最新内容，否则查询并读取本地缓存，当缓存中也不存在所需资源的情况下，则通过构造请求，向服务器获取线上内容。最终将本地和线上的内容做合并操作并返回。
 ![](http://img04.taobaocdn.com/tps/i4/T1ye85Fg8eXXXhTOTo-570-438.png)
+以上机制能够保证调试期和最终上线后的内容顺序完全一致。
 
 ### 完全本地开发
 
-所有到线上combo请求过的内容都会缓存在本地。下次访问时直接从本地获取。这个过程对前端开发者来说是透明的。只是会感觉第一次发起combo请求稍慢一些。这样，前端开发项目，只需要在项目建成的第一次，向Flex Combo请求一次资源，后续就再用无需网络，从而离线开发了。
+所有请求过的线上内容都会被缓存于本地。下次请求将直接从本地缓存获取内容。这个过程对前端开发者来说是透明的。只是会感觉第一次请求资源时稍慢一些。这样，前端开发项目，只需要在项目建成的第一次，向利用`Flex Combo`向线上请求一次资源，后续就再用无需网络，从而实现离线开发。
 ![](http://img02.taobaocdn.com/tps/i2/T1ohh6FmxcXXX06.PE-714-548.png)
@@ -68,3 +58,3 @@
 
-Flex Combo允许把本地目录挂接到任意url上。这个特性让前端在面临/apps/xxxx/yyy/zzz这样深度目录请求时，无需在本地创建同样深度的目录。
+`Flex Combo`允许把本地目录挂接到任意url上。这个特性让前端在面临/apps/xxxx/yyy/zzz这样深度目录请求时，无需在本地创建同样深度的目录。
 
@@ -79,17 +69,16 @@ ![](http://img01.taobaocdn.com/tps/i1/T11d47FX0cXXabys_j-669-370.png)
 
-在经典Combo功能中，如果请求的多个文件以不一致的方式编码，存在GBK和UTF8混杂的情况。Combo功能讲不同编码格式的内容合并到一齐返回。目前生产环境中，js代码上线前会经过压缩和转码，此问题不会暴露出来。但是在前端开发环境中，返回的前端代码为了可读性不应被压缩和编码，一旦出现混合编码的情况，这种不便就会暴露出来。在淘宝实际应用中，kissy是utf8编码，而其他业务级js都是gbk编码，如果，前端需要返回kissy的可调试代码的话，这个问题会变的很严重。
+在经典Combo功能中，如果请求的多个文件以不一致的方式编码，存在GBK和UTF8混杂的情况。Combo功能将不同编码格式的内容合并到一齐返回。目前生产环境中，js代码上线前会经过压缩和转码，此问题不会暴露出来。但是在前端开发环境中，返回的前端代码为了可读性不应被压缩和编码，一旦出现混合编码的情况，这种不便就会暴露出来。
 
 ![](http://img01.taobaocdn.com/tps/i1/T1jn86FllbXXbqNQkk-634-351.png)
 
-Flex Combo对这个技术细节做了周详考虑。Flex Combo内部提供了基于内容的编码探测机制。根据文件内容确定编码格式，一旦发现混合编码的情况，就将不符合要求的编码内容，就将起转换为输出编码格式。输出编码格式是可用户自定义的，目前支持UTF8和GBK两种。
+`Flex Combo`对这个技术细节做了周详考虑，内部提供了基于内容的编码探测机制。根据文件内容确定编码格式，一旦发现混合编码的情况，就将不符合要求的编码内容，就将起转换为输出编码格式。输出编码格式是可用户自定义的，目前支持UTF8和GBK两种。
 
 ### 灵活易扩展
 
-Flex Combo是一个connect组件，可以于connect生态系统的其他组件一起组合出更多功能。
+`Flex Combo`能够以中间件的形式嵌入Connect、Express、Koa等生态系统，与其他中间件一起组合，实现前端开发调试工程化的更多功能。
 
-![](http://img02.taobaocdn.com/tps/i2/T1dmX6FlFdXXX0GGTA-712-399.png)
 
 ### 易用
 
-Flex Combo不但是一个组件库，同时也是一个命令行工具。如果不想写脚本做扩展，可以通过一个命令享受到本地Combo的好处。
+`Flex Combo`不但是一个组件库，同时也是一个命令行工具。如果不想写脚本做扩展，可以通过一个命令享受到本地Combo的好处。
 
@@ -101,19 +90,23 @@ ## 命令参数
 
-    -d, --dir [string]        本地目录。默认情况下是执行命令的当前目录。
-    -u, --url [string]        本地目录映射URL。例如：传入/apps/et本地目录被映射到/apps/et下。这意味着只有当一个请求以/apps/et开头时，才会本地目录中寻找文件，本地目录由dir参数所指定的。
-    -H, --host [string]       服务器域名。如果文件不在本地，将到此域名处请求文件。
-    -s, --servlet [string]    Combo的servlet。对于淘宝而言是"?",对yahoo而言是"combo"。默认是"?"
-    -e, --seperator [string]  文件分隔符。默认为","
-    -c, --charset [string]    http响应数据的编码方式。默认为gbk。
-    -p, --port [string]       启动web服务的端口
+    -d, --dir [string]        本地目录，默认为执行命令的当前目录
+    -u, --url [string]        本地目录映射URL，例如：传入/apps/et本地目录被映射到/apps/et下，这意味着只有当一个请求以/apps/et开头时，才会本地目录中寻找文件，本地目录由dir参数所指定的
+    -H, --host [string]       服务器域名，如果文件不在本地，将到此域名处请求文件。
+    -s, --servlet [string]    Combo的servlet，对于淘宝而言是"?",对yahoo而言是"combo"，默认是"?"
+    -e, --seperator [string]  文件分隔符，默认为","
+    -c, --charset [string]    http响应数据的编码方式，默认为utf-8
+    -p, --http_port [int]        启动HTTP服务的端口，默认为80
+    -P, --https_port [int]       启动HTTPS服务的端口，默认为443
 
 在项目目录下执行`flex-combo`而不带任何参数时，将以项目目录为根目录建立Combo服务器。
+
 ## 高阶命令参数
 
- 除了通过命令行设置参数。flex-combo还支持配置文件，配置文件将支持更加丰富的特性。一般来说flex-como会在第一次运行时生成一份默认配置文件到`~/.flex-combo/config.json`, windows用户请到自己当前登录用户目录寻找这个文件。该文件以严格的JSON结构保存，编辑时一定要保证格式合法性。flex-combo的参数可以通过命令行、nodejs函数调用参数以及配置文件的三种方式配置。在同时使用三种方式配置参数的情况下，参数的优先级为命令行>配置文件>nodejs函数调用参数。
+除了通过命令行设置参数。`Flex Combo`还支持配置文件，配置文件将支持更加丰富的特性。一般来说flex-como会在第一次运行时生成一份默认配置文件到`~/.flex-combo/config.json`, Windows用户请到自己当前登录用户目录寻找这个文件。该文件以严格的JSON结构保存，编辑时一定要保证格式合法性。`Flex Combo`的参数可以通过命令行、Node.js函数调用参数以及配置文件的三种方式配置。在同时使用三种方式配置参数的情况下，参数的优先级为
+```
+命令行 > Node.js函数调用参数 > 配置文件
+```
  
- 一份完整的配置如下
- 
- ```
- {
+一份完整的配置如下：
+```
+{
     "urls": {
@@ -127,3 +120,3 @@ "/xxx":"/Users/david/xxxproject"
     "seperator": ",",
-    "charset": "gbk",
+    "charset": "utf-8",
     "filter": {
@@ -136,5 +129,9 @@ "\\?.+": "",
     "urlBasedCharset": {},
-    "hosts":{"a.tbcdn.cn":"122.225.67.241", "g.tbcdn.cn":"115.238.23.250"}
+    "hosts":{
+        "a.tbcdn.cn":"122.225.67.241",
+        "g.tbcdn.cn":"115.238.23.250"
+    }
 }
- ```
+```
+
 #### urls
@@ -162,3 +159,3 @@ urls参数是一个对象，指定需要代理路径。key表示需要被代理的url，value表示这个url将被映射到的本地硬盘路径。如上边配置所示`"/xxx":"/Users/david/xxxproject"`表示，所有以`/xxx`开头的请求都会从本地`/Users/david/xxxproject`目录中寻找文件。即就是请求`127.0.0.1/xxx/a.js`，返回`/Users/david/xxxproject/a.js`。支持子目录。
 ```
-flex-combo将根据**最长匹配**原则，选择最合适规则访问资源文件。上面例子中，如果请求`/xxx/aaa/b.js`,虽然同时符合两项规则，但最终生效规则是字符串最长的那项，也就是`"/xxx/aaa":"/Users/david/yyyproject"`，`/xxx/aaa/b.js`会从`/Users/david/yyyproject"`获取。
+`Flex Combo`将根据**最长匹配**原则，选择最合适规则访问资源文件。上面例子中，如果请求`/xxx/aaa/b.js`,虽然同时符合两项规则，但最终生效规则是字符串最长的那项，也就是`"/xxx/aaa":"/Users/david/yyyproject"`，`/xxx/aaa/b.js`会从`/Users/david/yyyproject"`获取。
 
@@ -182,3 +179,6 @@ urls参数对前端开发灵活的在本地支持多个项目有重要意义。在实际项目中，可以灵活运用配置文件全局参数和命令行参数以获取开发便利性。
 ```
-"hosts":{"a.tbcdn.cn":"122.225.67.241", "g.tbcdn.cn":"115.238.23.250"}
+"hosts":{
+    "a.tbcdn.cn":"122.225.67.241",
+    "g.tbcdn.cn":"115.238.23.250"
+}
 ``` 
@@ -210,6 +210,44 @@
 
+## lib开发模式
+通过`require("flex-combo/api")`，引入`Flex Combo`的API，其暴露出对象Class，`new`操作创建FlexCombo实例。
+
+* 通过`defineParser`方法自定义URL解析规则
+输入参数为URL字符串，通过自定义逻辑的处理，最终输出一个映射地址数组，供接下来获取具体内容。
+
+* 通过`addEngine`方法添加assets动态编译引擎
+输入参数1为匹配规则，为正则表达式格式
+输入参数2为处理函数，该函数有两个参数，分别是本地绝对路径和请求URL
+最终输出动态编译结果，未能编译的则输出null
+
+```
+var http = require("http");
+var FlexCombo = require("flex-combo/api");
+
+var fcInst = new FlexCombo();
+    
+// 自定义URL解析规则
+fcInst.defineParser(function(url) {
+    return [];
+});
+
+// 添加assets动态编译引擎
+// 例如要加入stylus支持，首先要在配置文件supportedFile中加入相应后缀匹配\\.styl$，然后通过addEngine添加动态编译逻辑
+fcInst.addEngine("\\.suffix$", function(absPath, url) {
+    return "";
+});
+
+http.createServer(function(req, res) {
+    fcInst = new FlexCombo([param], [dir]);
+    fcInst.handle(req, res, function() {
+        res.writeHead(404, {"Content-Type": "text/plain"});
+        res.end("Your combo file not found.");
+    });
+})
+.listen(1234);
+```
+
 ## FAQ 
-1.  为什么会提示`Error: listen EACCES`。  
-     Flex combo使用80端口建立前端服务器，在Linux、Mac下使用80端口需要root权限。解决这个问题的方法是使用`sudo flex-combo [options]`的方式运行。
-2.   为什么会提示`Error: listen EADDRINUSE`。  
-Flex Combo所需要使用的端口正在被使用中，如果这个端口是80端口，你需要检查系统中是否有其他web容器，比如Apache、Nginx等是否使用了80端口。如果不是，你需要检查是否系统中有其他Flex Combo正在运行。
+1. 为什么会提示`Error: listen EACCES`？
+`Flex Combo`使用80端口建立前端服务器，在Linux、Mac下使用80端口需要root权限。解决这个问题的方法是使用`sudo flex-combo [options]`的方式运行。
+2. 为什么会提示`Error: listen EADDRINUSE`？  
+`Flex Combo`所需要使用的端口正在被使用中，如果这个端口是80端口，你需要检查系统中是否有其他Web容器（如Apache、Nginx等）是否使用了80端口。如果不是，你需要检查是否系统中有其他`Flex Combo`进程正在运行。

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Network access

Supply chain risk

This module accesses the network.

Found 2 instances in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Fixed alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

41862

11.54%

Dependency count

8

-11.11%

Lines of code

614

16.51%

Number of lines in readme file

243

18.54%

Worsened metrics

Number of low supply chain risk alerts

5

25%

Number of medium supply chain risk alerts

4

100%

Dependency changes

• + Added

  juicer@~0.6.6-stable

• + Added

  less@~1.7.5

• + Added

  node-sass@~1.2.2

• - Removed

  crypto@0.0.3

• - Removed

  dac@~0.1.9

• - Removed

  debug@~0.7.0

• - Removed

  debug.log@~0.0.3

• - Removed

  crypto@0.0.3
  (transitive)

• - Removed

  dac@0.1.10
  (transitive)

• - Removed

  debug@0.7.4
  (transitive)

• - Removed

  debug.log@0.0.3
  (transitive)

• Updated

  iconv-lite@~0.4.4