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

fdserver

v0.9.0

Published

a server for web developer

Downloads

9

Readme

fd-server

注:1688 内部同学请使用直接集成到 Neat 中的fdserver,直接使用neat server启动服务。要给fdserver贡献代码请移步这里

fd-server是一个使用node js开发的服务器

开发工程师可以使用它来代替apache搭建更轻量级的前端开发环境

它是基于connect模块开发的,所有的组件都以中间件的方式进行开发,因此很容易进行扩展。

它不仅仅是一个服务器,我们会在此基础上扩展很多工具和插件,从而让我们的开发变得更方便快捷。

你也可以在上面随意写写nodejs代码来扩展一些有意思的功能,整天开发客户端代码也够无聊的 (^_^)

使用方法

在使用之前需要你的机子安装node环境,然后进行以下步骤

  1. git clone https://github.com/fangdeng/fdserver.git

如果没有git可以去 http://42.121.109.6:3000/ 下载

  1. cd fdserver

  2. npm install --registry http://registry.cnpmjs.org # 安装依赖库

  3. cp config.js.sample config.js

  4. 参考配置说明修改config.js

  5. sudo node bin/fdserver # linux 等环境下可以使用sudo bin/fdserver直接运行

[注]

  1. 默认是运行在80端口上,所以需要管理员权限
  2. win下启动有少许差异,请自行调整
  3. config.js.sample是配置示例文件,需要重命名为 config.js修改成适合您的情况才能运行
  4. 后续会提供在线配置界面

配置和说明

通过配置config.js来使用服务器

config.js是一个普通的js文件,因此你可以在里面书写任意的js代码

修改config.js后,服务器将自动重新启动

通用

logger

日志配置,可以参考 Logger 配置

默认为空,即不输出日志

port

端口号,默认为80

host

可以独立配置多个host

{
	// 全局配置
	...

	hosts: {
		'style.c.aliimg.com': {
			root: '/Users/bencode/webroot/styles'
		},

		'assets.1688.com': {
			root: '/Users/bencode/webroot/static_site'
		}

		...
	}
}

如上例配置了两个host, 每个host的root配置成资源目录

[注] 路径需要以 / 分隔

rewrite

通过rewrite可以配置一些重写规则

这里的rewrite实现的比较简单,暂时没有apache那么强大的功能

但应该满足我们日常的开发需求

{
	hosts: {

		'style.c.aliimg.com': {

			root: '/Users/bencode/webroot/styles',

			rewrite: [
			{
				from: '^/app/offer/(.*)$',
				to: 'styleoffer/$1'
			},

			{
				from: '^/app/butterfly/(.*)$',
				to: 'butterfly/$1'
			},

			{
				from: '^(.*)$',
				to: 'http://110.75.196.23$1'
			}
			]
		}
	}
}
  1. rewrite 需要配置成一个数组,每个数组元素是一个对象
  2. 每个rewrite对象需要指定 from 和 to 属性
  3. from是一个正则式,可以以字符串形式指定,也可以使用js的正则式语法
  4. to表示要重写的目标位置。可以是 http://地址,也可以是本地地址。本地地址可以是相对于root,也可以是绝对地址
  5. to中可以使用正则表达式的替换符,如 $1, $2, 也可以使用配置信息替换符,如 {root}, {host}, {port}等
  6. 只有当目标位置存在时,重写规则才生效。暂时没有对url目标重写做存在检测,后续可能会加404检测。
  7. rewrite规则按顺序执行

上例配置了3条rewrite规则:

  1. 对于 http://style.c.aliimg.com/app/offer/... 下的文件,重定向到 /Users/bencode/webroot/styles/styleoffer/...
  2. 对于 http://style.c.aliimg.com/app/butterfly/... 下的文件,重定向到 /Users/bencode/webroot/styles/butterfly/...
  3. 如果还是找不到,最后到 http://110.75.196.23上去抓取

[注]

默认情况下,只有文件直接在本地找不到时,才会使用rewrite规则

因为默认的文件访问是使用 host filter进行的,而host filter排在rewrite filter之前

请参考 filters.js

merge

merge文件实时编译

如果配置

{
	hosts: {
		'style.c.aliimg.com': {
			root: ...,
			merge: true
		}
	}
}

则js/css符合merge文件格式时,会返回merge后的结果文件

因为有些页面在没merge时,可能不能正常工作,可以开启这个选项来开发。

less

less文件进行实时编译

  1. 如果访问less文件时,则会直接返回less文件
  2. 如果访问css文件时,在对应位置有less文件时,则读取此less文件,并编译成css文件输出
  3. 如果less文件对应位置有css文件,则编译好less文件后,会将css代码写回已存在的css文件,达到自动更新功能。如果css文件不存在,则不进行写操作。
  4. 可以指定 less 选项,可参考 Less中文文档

{
	hosts: {
		'style.c.aliimg.com': {
			less: {
				...
			}
		}
	}
}

[注]

如果原css文件的访问需要url rewrite,则对less的支持也需要url rewrite支持

例:

'style.c.aliimg.com': {
	root: '/Users/bencode/webroot/styles',
	merge: true,
	rewrite: [
		{
			from: /^\/app\/butterfly\/(.*)\.css\b/,
			to: 'butterfly/$1.less'
		},

		{
			from: '^/app/butterfly/(.*)$',
			to: 'butterfly/$1'
		}
	]
...

以上将 app/butterfly/.../some.css 重写向成 app/butterfly/.../some.less以提供对less的支持

concat

支持tengine concat协议和小米模块concat协议

即能够理解下面两种形式的url

http://assets.1688.com??css/ui/form.css,css/ui/table.css...

http://cdn.c.aliimg.com/css/ui/form|css/ui/table|...|css/ui/tab.css

你首先需要把以上host绑定到本地

如: 127.0.0.1 asserts.1688.com 127.0.0.1 cdn.c.aliimg.com

默认情况下,url中的资源会被请求,然后返回合并后的文件

如果配置参数 concatSplit: true, 则会仅仅输出他们的引用,这样在调试时可能会更方便

如指定了 concatSplit: true, 则会得到类似以下输出:

@import url(http://style.c.aliimg.com/sys/css/universal/masthead/industry-v1-min.css);
@import url(http://style.c.aliimg.com/fdevlib/css/fdev-v4/editor/editor-min.css);
@import url(http://style.c.aliimg.com/fdevlib/css/fdev-v4/core/fdev-flying.css);

delay

如果配置了 delay: true

则对相应资源的访问可以延迟指定时间返回。

如访问 http://style.c.aliimg.com/app/butterfly/js/lang/class.js?delay=2

则过2s才返回这个url的内容

jade

支持jade 模板文件的解析

如果访问的文件后缀为 .jade 或者 url带有参数 ?type=jade,则会解析内容成html代码

可以指定参数 jade来配置 jade parser

参考文档 jade readme

markdown

支持markdown文件的解析

如果访问的文件后缀为 .md 或者 url带有参数 ?type=md, 则会解析内容成html代码

添加?autoreload, 则浏览器有自动刷新的功能,方便文档的编写

可以指定参数 markdown来配置 markdown parser

参考文档 markdown

stylus

支持stylus文件的解析

如果访问的文件后缀为 .stylus 或者 url带有参数 ?type=stylus, 则会解析内容成css代码

app

可以使用app提供的开发特性来开发具有ui的功能

可以参考内置demo: app/host

可以通过访问http://127.0.0.1/host进行app的访问

你也可以建立自己的app集

hosts: {
	myapp: {
		appRoot: '/Users/bencode/work/myapp'
	}
}

你可以在自己的目录下开发app

livereload

对html本身里的引用的js/css文件自动监控,支持实时刷新,实时编译,需与gulp/grunt的watch配合

tpl2js

方便arttemplate的实时编译调试

  • 如果访问.art.tpl文件时,编译成.js文件输出

  • 配置放在对应的host配置中,建议针对不同的项目设置不同的hostname

hosts: {
	project: {
		root: '/Users/bencode/project',
		tpl2js:{
			type:'fmd',
			alias:'lib/template'
		}
	}
}
  • 配置说明

字段 | 类型 | 默认值| 说明 ------------ | ------------- | ------------ | ------------ type | String | fmd | 返回的模块类型,可选:fmdpure-fmdcmdamdcommonjs,参考Ali-tmodjs alias | String | template | arttemplate的主文件的模块id名

chinese2unicode

动态地将被请求的 js 文件中的中文转成 unicode 形式。使用很简单,如需要转 unicode,首先需要确保已注册了 chinese2unicode 模块:

filters: [
    'less',
    ~~
    'chinese2unicode', \\ 确保已注册
    ~~
    'host',
    'rewrite'
]

然后在对应的 rewrite 规则里增加一个 chinese2unicode 字段、并设置为 true 即可,形如:

{
    from: /^\/m\/huopin\/(.*)$/,
    to: '$1',
    chinese2unicode: true
}

已支持特性

0.8.8

  • tpl2js - arttemplate开发支持

0.8.6

  • livereload - html实时监控,需配合gulp/grunt插件使用

v0.8.5

  • outputCharset支持

支持配置outputCharset,输出html, css文件时Context-Type中会指定charset

示例(config.js)

	hosts: {
		'webroot': {
			root: '/Users/bencode/webroot',
			outputCharset: 'gbk'
		},
		...
  • 去掉connect 3.0已废弃方法警告

v0.7

  • host - 多host支持
  • rewrte - url rewrite
  • merge - merge文件预合并
  • less - less开发的支持
  • concat - tengine concat和小米concat协议支持
  • delay - 资源延迟返回
  • jade - jade模板格式支持
  • markdown - markdown格式支持
  • stylus - stylus开发的支持
  • app - 对具有界面功能的开发支持, 目前内置的app有:
    1. host - 对host进行管理的一个app demo
    2. help - 帮助文档

扩展和开发

  1. 可以参考 lib/filter包下面的示例进行开发
  2. 每个filter都是一个connect中间件, 参考文档 Connect
  3. 请安装node-dev(npm install -g node-dev),这样在开发时,可以在文件修改后自动重启服务器
  4. 默认启动时,会启动多个子进程,可以加-d选项,在开发时只启动一个进程,以更方便调试