Skip to main content

从 0 到 1 实现一个 npm 包&开源

背景说明

介绍

自己写脚手架 or 公司内部使用的二方包,可能会需要我们自己去写一些 npm 包。

note

如果 npm 包想要设置为私密的(eg: 仅公司内网可用),可以使用 Verdaccio

如果是自己写脚手架,可以写 UI 组件,函数工具等~ 导出方式和使用方式,也会因类型的不同有所差异。

其实想简单点,可以把 npm 包的使用想象成我们平时在项目中写的 util 函数或者是组件的使用,npm 包的发版就好比是我们自己项目的发版,它也是需要去打包,部署的。 一般来说 npm 包的打包工具有 webpack, rollup 等,都行,具体要用什么可以根据自己的实际场景来确定。可以参考webpack vs rollup

命名

npm 的命名+版本号具有唯一性,就像网址域名一样。所以起名字的时候要清楚。

scoped package

命名具有唯一性的话,那如果包很多,又有类似康帅傅这种 typo 或刻意的行为,会让包的管理比较杂,也不友好,所以我们可以使用 scope。

新建项目

项目初始化

  1. git 上创建 repo & clone git创建repo

  2. npm 包初始化:

npm init -y
  1. package.json 文件解释
{
"name": "alive-amy",
"version": "1.0.0",
"description": "alive world",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/AmyShieh/alive-amy.git"
},
"keywords": [],
"author": "aliveAmy <aliveAmy719@gmail.com> (https://github.com/AmyShieh)",
"license": "MIT",
"bugs": {
"url": "https://github.com/AmyShieh/alive-amy/issues"
},
"homepage": "https://github.com/AmyShieh/alive-amy#readme"
}

项目导出

publish

版本升级

用户选择

Q&A

脚手架和组件库的区别