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

jxx

v0.0.5

Published

jui package manger

Downloads

3

Readme

JPM

A JUI Package Manager

什么是符合条件的组件,

  1. 所在的仓库会提交到gitlab中
  2. 符合下面的组件规范

提交一个组件流程

按组件规范编写组件 -> 生成文档 -> 发布组件

依赖

npm install jsdoc -g
npm install jxx -g

组件规范

对组件目录结构的规范,以及package.json规范.

目录结构

组件文件夹目录结构

- index.js // 组件js
- index.html // 可运行的文档 非polymer通过jxx doc运行生成
- demo.html // 可运行的demo
- package.json // 描述组件信息

整个项目的目录结构example

- build
- src
	- asyncload
		index.html 
		demo.html
		package.json 
.git
.gitignore

package.json规范

{
  // [必填]
  "name": "asyncload",
  // 默认index.js
  "main": "index.js",
  "description": "异步加载的脚本",
  // [必填] 必须是git@gitlab这种地址
  "giturl": "[email protected]:ju/jui-gallery.git",
  // [必填] 组件的相对仓库根目录的路径
  "path": "src/asyncload",
  // 即组件所在的分支,即daily/0.1.2,取"0.1.2"
  "version": "0.1.2"
}

文档生成(针对非polymer写的组件)

jpm组件网站,读取的文档的路径都是组件目录下的index.html.

polymer则遵循iron-component-page规范,写index.html的文档html即可。

非polymer组件,则要编写符合jsdoc规范的代码,然后使用jxx doc生成index.html

文档书写

文档会分几大部分,第一部分组件的说明介绍,第二部分组件的API,包括(Properties, Methods, Events, Behaviors非polymer没有)

** 第一部分 组件说明 **

必须标记上@fileOverview,支持Markdown语法,一般放在index.js顶部,

// index.js
/**
 * @fileOverview  
 * 
 * Asyncload
 * 
 * ## 介绍
 *
 * 加载异步的数据
 *	
 * ## 如何使用
 * 
 * ```
 * <div class="J-asyncload" data-external="./external-fragment.html"></div>
 * KISSY.use('jui/0.1.2/asyncload/index', function (S, Asyncload) {
 * 	new Asyncload('.J-asyncload');
 * });
 * ```
 */

** 第二部分 API **

符合jsdoc的语法

@event

@property

@function

文档生成工具()

jxx提供了

命令 jxx doc
在组件目录下执行jxx doc会解析index.js生成index.html的文档html,注:通过file://访问index.html会无效。需通过创建一个localhost的server来访问。

cd ~/work/jui-gallery
cd src/asyncload
jxx doc

如何发布一个组件

环境准备

1 按上述组件规范写好组件

发布一个组件

演示项目是 jui-gallery仓库,组件asyncload在仓库下src/asyncload文件夹。

cd ~/work/jui-gallery
cd src/asyncload
jxx publish
或 jxx publish --tag=0.1.2 (自定义指定版本号)

一些说明

指定组件版本号

有三种版本号指定方式

版本号获取优先级:命令行指定 > package.json指定 > 自动获取当前git分支号

命令行指定

jxx publish --tag=<version> 如:jxx publish --tag=0.1.2

** package.json指定 **

即在package.json中version字段指定

** 自动获取当前git分支号 **

即工具会自动获取当前的git项目的分支

组件网站

http://mo.ju.taobao.net:3006/list

开发命令

DEBUG=jpm:* node web/index.js jpm publish --debug=true

API接口

http://localhost:3006/api/publish?name=asyncload&version=0.0.1 http://localhost:3006/api/register?name=asyncload