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

fis-net-ease

v0.0.1

Published

基于FIS的网易游戏网站部解决方案

Downloads

1

Readme

FIS项目架构DEMO

这里展示的一个FIS项目最基础的文件与文件夹结构,以及fis配置

项目目录结构

	src    //存放该项目源码
	|--css  //存在所有less文件和css文件
	|	|--_reset.less  //重置页面默认样式(可以直接使用)
	|	|--_common.less  //项目中通用样式(需要自行修改)
	|	|--index.less  //项目中对应模块或者页面的样式(这个只是例子,需要自行修改与添加)
	|--img  //存放所有图片文件
	|--data //存放不希望打包后的文件有版本号
	|--inline  //存在所有需要被引用的模块html文件(例如多个页面公用的header,footer等等,或者是一个页面太长了,将各自模块放于此)
	|--js	//所有js文件
	|	|--app   //与项目逻辑相关的js文件,例如`index.js`
	|	|--common   //项目中公用的js文件
	|	|--lib	 //项目中需要用到的第三方库与插件,例如`underscore.js`,`jquery.slider.js`等
	|--template		//项目中需要用到的模板
	|	|--index.tmpl  //示例模板文件
	|--index.html 	//项目中需要的页面html文件

项目发布后的结构

	dist	//存放需要发布的文件
	|--css	//这里是所有编译好的less转css的文件
	|--img 	//所有需要发布的img
	|--pkg	//这里是已经自动打包合并好的js和css文件,以及lib合并文件
	|--data  //这里是存不需要添加版本号的资源(img,css,js)
	|--index.html 	//修改完毕的html

FIS相关知识

如何安装FIS,如何使用来开发,如何使用来打包发布等

1.安装FIS与相关插件

  • 安装Nodejs,直接到官网下载安装http://nodejs.org/
  • 安装FIS,在命令行下,输入:
	npm install -g fis
  • 安装FIS需要的插件
	npm install -g fis-postpackager-simple
	npm install -g fis-parser-less
	npm install -g fis-parser-utc
	npm install -g fis-postprocessor-include

2.如何使用FIS

  • html文件,需要放在src根目录下
	//表示将此html文件内容引用到该标签位置
	<link rel="import" href="inline/index.html?__inline">
	//script标签中有data-fixed属性,表示,该文件不会进行自动打包,其余的会合并成为一个js文件
	<script charset="gb2312" type="text/javascript" data-fixed="true" src="js/lib/underscore.js"></script>
  • less文件,放在css文件夹中

注意:带下划线_开头文件,不会编译成为单独文件,表示它会给其他less文件合并

  • css文件

    • 需要自动合并为雪碧图的图片,在引用文件名后添加?__sprite,单个css文件中所有添加此标记的,会合并成一个单独文件
    • 那些被合并的原图,文件名必须以下划线_开头,这样打包发布,就不会出现未合并之前的图片,详情参考源码
  • js文件

    • lib文件夹下的js文件会全部合并复制到打包目录pkg/下,名为lib.js
    • 非lib文件夹的js,都会自动合并打包到pgk目录下
    • 如果非lib文件,页面引用总数量只有一个,那么需要自行修改配置,详见第3点
	//引入模板,执行模板函数,返回拼接后的html,页面需要引用`unserscore.js`文件
	var under = __inline('../../template/index.tmpl');
	under({title :'test'});
	//js中,需要引用到文件的,需要这样写,打包时候才会替换为CDN路径
	var img_url = __uri('../../data/demo.png');

3.FIS中需要自己修改的配置

这里列出配置文件中需要自己手动修改的配置,在fis-conf.js中有注释,未提到的,默认情况下不要修改

  • CDN路径:修改变量cdn-path,改为自己项目中的线上绝对路径
  • 雪碧图倍数:移动端合并的雪碧图,不需要设置background-size,只需要修改变量css-scale值为0.5即可,默认是1
  • 资源文件合并:目前只针对js文件,如果lib文件涉及引用顺序,需要修改变量pack中的数组,按顺序写合并文件即可,如果项目中只有一个非lib文件,则需要在pack中独立添加到pkg文件下
  • include文件的域名:页面中需要include新闻发布系统中的页面,修改include-host为include的域名,默认情况,调试模式下,会自动拉取页面到对应位置,打包模式是不会

3.如何开始FIS

  • 开发调试,进入项目的文件夹,输入命令:
	//这句是启动一个本地服务,输入完后,会自动打开浏览器,定位到:http://127.0.0.1:8080
	fis server start --type node
	//这句是编译源码`src`文件夹下的,然后监听文件变化,自动编译,以及开启livereload,自动刷新浏览器(IE不支持)
	fis release -wL

4.打包发布代码

  • 更新线上最新的dist文件夹代码,如果没有,请无视
  • 修改fis-conf.js中的配置,将domain中的值,修改为线上正式资源地址,末尾不能有/
  • 删除dist文件夹
  • 在项目目录下,输入以下命令:
    //发布打包,o表示压缩,m表示采用md5作为版本号,p代表打包,D表示修改cdn全路径,d表示发布到dist路径下
	fis release -ompDd dist
  • 输入完后,会自动打包到dist目录下
  • 将除了html文件,都发布到静态资源服务器中,html就单独发布到项目对应的目录,如果出现文件相同,请选择跳过就好了,不需要知道自己具体修改了哪些文件

待补充