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

@peach_blossom/test-package

v3.0.7

Published

##### package.json ```json

Downloads

2

Readme

说明文档

package.json

{
  // 项目名称,发布到npm上的名称,如果与其他项目相似会发布失败
  "name": "@peach_blossom/test-package",
  // 项目版本
  "version": "3.0.5",
  // 项目描述
  "description": "",
  // 入口文件,这里指向打包过后的文件,这个配置是node_module模块的入口文件
  // 如果不配置,那么默认是index.js
  "main": "dist/my-library.js",
  // 配置类型,这里是module,表示是es6模块
  "type": "module",
  // npm run 命令
  // npm run build 其实就是执行 rollup -c
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rollup -c"
  },
  // 这个库搜索的关键字
  "keywords": [],
  // 作者
  "author": "",
  // 开源协议
  "license": "ISC",
  // 依赖
  "devDependencies": {
    "rollup": "^3.20.2",
    "rollup-plugin-typescript2": "^0.34.1",
    "typescript": "^5.0.4"
  },
  // 要上传到npm的文件, 这里只上传dist
  "file": [
    "dist"
  ]
}
rollup.config.js
// 支持Typescript
import typescript from 'rollup-plugin-typescript2';

export default {
    // 打包的入口文件,这里指向src/my-library.ts
    input: 'src/my-library.ts',
    // 打包输出文件
    output: {
        file: 'dist/my-library.js',
        // 打包输出的格式,这里是es6模块, 也可以配置CommonJs模块
        format: 'es',
        name: 'MyLibrary',
    },
    // Typescript扩展
    plugins: [typescript()],
    external: [],
};
src/my-library.ts
// 测试的入口文件,直接导出一个sayHello函数
// 引入方式 import {sayHello} from 'my-library'
export function sayHello(name: string) {
    console.log(`Hello, ${name}!`);
}
test-import.js
// 从打包过后的文件导入
import {sayHello} from "./dist/my-library.js";
// 执行方法
sayHello('xxx');

总结

package.json 是配置npm包的信息,比如包名,版本,入口文件,依赖等等 rollup.config.js 是配置打包信息,比如打包入口文件,打包输出文件,打包格式等等 .gitignore 是配置git忽略文件,比如node_modules,dist等等 .npmignore 是配置npm忽略文件,比如node_modules,dist等等, 配置这个也可以忽略上传文件

参考

一般可以直接package.json指定到打包过后的文件 rollup.config.js 指定到原项目的入口文件 如果要测试的话可以直接控制台node 文件名