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 🙏

© 2026 – Pkg Stats / Ryan Hefner

pac-cli

v1.0.3

Published

开发sdk以及vue组件的脚手架

Readme

特色

1、采用babel7新选项usage,可以不用手动引入垫片,不用担心引入过多的垫片导致包体积变大,可以放心的使用ES6+

2、采用core-js3,更优的代码,更多的方法可以使用,比如以下这些:

  • 装饰器
class MyClass {
  @decorator
  method() {}
}
  • 私有属性和方法
class C {
  static #foo = "bar";
}

class Person {
  #age = 19;

  #increaseAge() {
    this.#age++;
  }

  birthday() {
    this.#increaseAge();
    alert("Happy Birthday!");
  }
}
  • 管道符

关于编译后的代码

为了适配各种环境,分别打出了多个包。

sdk包的目录结构

├── dist
│   ├── *.cjs.js // commonjs规范的包
│   ├── *.es.js // ES Module规范的包
│   ├── *.min.js // IIFE规范的包,可以直接通过<script></script>引入
│   └── *.umd.js // umd规范的包

main指向的是*.umd.jsmodule指向的是*.es.js,如果有特殊需求可以直接指定文件来引入

vue组件包的目录结构

├── dist
│   ├── lib-px // 样式单位是px
│   │   ├── *.es.js
│   │   └── *.umd.js
│   ├── lib-rem // 样式单位是rem
│   │   ├── *.es.js
│   │   └── *.umd.js
│   └── lib-vw // 样式单位是vw
│       ├── *.es.js
│       └── *.umd.js

main指向的是lib-px/*.umd.jsmodule指向的是lib/*.es.js,如果有特殊需求可以直接指定文件来引入,例如:

import Test from 'test/dist/lib-rem/test.es.js'

用法

脚手架只提供创建项目的能力,打包编译的能力是由创建出来的项目提供的。

// 安装脚手架
npm install -g pac-cli

// 创建项目
pac create name
Options:
  -V, --version      output the version number
  -h, --help         output usage information

Commands:
  create <app-name>  通过pac脚手架创建一个可以快速开发sdk以及vue组件的项目

如果在现有的git目录创建项目,可以传递<app-name>.,就可以了。

pac create .