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

legao-mobile

v0.0.1

Published

* 下载并安装[Node](http://nodejs.org/)以及[tnpm](http://web.npm.alibaba-inc.com/package/tnpm), 具体请参考[Node.js开发环境搭建](http://node.alibaba-inc.com/env/README.html)。

Downloads

5

Readme

准备

开始

  • 下载最新ZIP安装包。解压之后,修改代码库的名称为你自己的项目名称。
  • 安装项目依赖库 tnpm install
  • 启动项目 npm start。打开 http://localhost:8080 即可访问index.html。

构建打包

npm run release

进行图片压缩、上传图片和相对地址替换,执行htmlone内联js、css,发布html生成在publish目录上。

新建页面

npm run add -- [demo]

src目录下会新建一个view:src/views/demo.htmlsrc/views/demo.jssrc/views/demo.less

Weinre调试

npm run weinre

自动往html里注入weinre脚本,无需手动引入。

配置

tools/config.js可以进行一些配置

module.exports = {
	//Rem配置
	px2rem: {
		rootValue: 75,           //rem根值,视觉稿宽度/10
		minPx: 1,                //超过minPx才转化成rem
		unitPrecision: 5,        //rem小数点精度
		propertyBlackList: [],   //rem转换黑名单
        propertyWhiteList: []    //rem转换白名单
	},
	port: 8080,  //端口
	imagemin: true, //是否进行图片压缩
	noRecord: false 
}

单/多页面支持

约定/src/views/[page]/package.json中的main字段为页面的入口文件,同目录上存在与入口文件同名的html

在编译时会扫描入口html文件并且根据webpack配置项解决entry的路径依赖。

这样可以做到同时支持SPA和多页面型的项目。

其他

  • 编译后的文件存放在build目录下,包括html,html里不需要手动引入页面js和css,编译会自动引入。
  • 默认视觉稿宽度为750,所以rem的rootValue为75,如为其他宽度,修改tools/config.jsrootValue的值(视觉稿宽度/10)。