如何发布一个npm包

xuks 2020-7-20 npm 插件开发

前言

作为一个前端工程师，npm-包管理器我们都比较熟悉，也经常使用，今天我为大家简单介绍一下如何发布一个属于自己的npm包

主要步骤

创建一个自己的npm账号 npm官网

2.创建一个自己的项目

创建一个项目文件夹yxp_calendar(这里以发布一款日历插件为例)
cd yxp_calendar
npm init 具体初始化init配置根据项目自行配置

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (my-project)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\Users\ASUS\Desktop\test\my-project\package.json:

{
  "name": "yxp_calendar",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

修改package.json

// package.json
{
  "name": "yxp_calendar",
  "version": "1.1.0",
  "description": "yxp_calendar plugin",
  "main": "lib/yxp_calendar.min.js", // 插件被引入的入口文件 使用者import时的文件
  ···

1
2
3
4
5
6
7

根据项目搭建自己的目录结构，这里举例为：

yxp_calendar // 项目文件名
|- /node_modules // 依赖包
|- lib // 插件打包后存放文件夹
  |- yxp_calendar.min.js // 打包后插件文件
|- src 
  |- calendar // 插件实现代码
    |- calendar.js
    |- calendar.css
  |- index.js // 入口文件
|- .npmignore
|- package.json
|- package-lock.json
|- README.md
|- webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14

创建 .npmignore 添加发布时忽略文件及目录

根据需要安装相应依赖如babel及需要的loader等，以及我们打包使用的webpack

webpack 打包配置示例：

// webpack.config.js
module.exports = {
    entry: "./src/index.js",//入口文件，就是上步骤的src目录下的index.js文件，
    output: {
        path: path.resolve(__dirname, './lib'),//输出路径，就是上步骤中新建的dist目录，
        publicPath: '/lib/',
        filename: 'yxp_calendar.min.js', // 打包文件名
        libraryTarget: 'umd', // 这里一般填写umd 支持多种规范引入使用插件
        umdNamedDefine: true
    },
    ···

1
2
3
4
5
6
7
8
9
10
11

构建自己的项目执行package脚本build我们的项目，如果不需要打包可忽略此步骤（build后输出文件就是上述打包的xxx.min.js）
npm进行登录执行npm login 输入用户名及密码邮箱等输入密码时默认为hidden

PS F:\myDemo\res\npm\yxp_calendar> npm login
Username: littlekai
Password:
Email: (this IS public) yoursEmail@qq.com
Logged in as littlekai on https://registry.npmjs.org/.

1
2
3
4
5

npm 发布执行npm publish

PS F:\myDemo\res\npm\yxp_calendar> npm publish
npm notice
npm notice package: yxp_calendar@1.1.0
npm notice === Tarball Contents ===
npm notice 774B   package.json
npm notice 1.5kB  README.md
npm notice 1.2kB  webpack.config.js
npm notice 41.2kB lib/yxp_calendar.min.js
npm notice === Tarball Details ===
npm notice name:          yxp_calendar
npm notice version:       1.1.0
npm notice package size:  13.9 kB
npm notice unpacked size: 44.7 kB
npm notice shasum:        807e2bb65daac4c93ad17026143ec359d6accde3
npm notice integrity:     sha512-VQOIfcnpxLHJU[...]IbNBDMrZx/jnA==
npm notice total files:   4
npm notice
+ yxp_calendar@1.1.0

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

若需要删除包：npm unpublish yxp_calendar@1.0.0 删除某个版本或 npm unpublish --force 删除整个npm的包删除后，24h内不允许发布重名包文件

常见问题

执行npm publish 报错

可能npm登录失效重新npm login 登录一下

package.json 中包名冲突已经被发布使用或者此次发布的版本号未更新

"name": "yxp_calendar", "version": "1.1.0",

如何发布一个npm包

# 前言

# 主要步骤

# 常见问题

前言

主要步骤

常见问题