npm 初始化

  [plaintext]
1
cnpm init

一个项目，首先初始化，然后填写对应的基本信息。

属性

  [plaintext]
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
    接着就依次填写, 不想填写的话也可以一路Enter

    name： 模块名，之后发布之后就可以让用户npm install xxxx来引用你的开源模块了 version：
    版本号，语义版本号分为X.Y.Z三位，分别代表主版本号、次版本号和补丁版本号。当代码变更时，版本号按以下原则更新。
    如果只是修复bug，需要更新Z位。 如果是新增了功能，但是向下兼容，需要更新Y位。

    如果有大变动，向下不兼容，需要更新X位。

    description： 简单介绍自己的模块

    main： 入口文件，必要，当通过require(‘xxx’)时，是读取main里声明的文件

    test command： 测试命令

    git repository： git仓库地址

    keywords： 关键词，可以通过npm搜索你填写的关键词找到你的模块

    author： 作者信息，可以之后编辑更详细一些

    license（ISC）： 代码授权许可 可以参考这里

    以上放心可以大胆写，因为之后反正要改。

    初始化项目完成，可以看到目录中出现了一个叫 package.json 的文件

package.json

此时，会生成对应的 package.json

  [json]
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
{
  "name": "monitor-web",
  "version": "1.0.0",
  "description": "The web monitor tool.",
  "main": "index.js",
  "directories": {
    "example": "example"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/houbb/monitor-web-js.git"
  },
  "keywords": [
    "monitor"
  ],
  "author": "houbb",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/houbb/monitor-web-js/issues"
  },
  "homepage": "https://github.com/houbb/monitor-web-js#readme"
}

index.js

在 package.json 同级目录下新建 index.js，存放要发布到npm上的函数 该文件内容如下

直接把代码全部拷贝到 index.js 中。

install

执行 npm install -g 检查是否报错

日志：

  [plaintext]
1
2
3
4
5
6
7
λ npm install -g
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

added 1 package, and audited 3 packages in 704ms

found 0 vulnerabilities

执行 npm link(旨在安装开发包并实时查看更改，而无需继续重新安装)

登录npm账号

注册

可以在官方网站 https://registry.npmjs.org/ 注册账户。

执行

  [plaintext]
1
npm login

ps: npm 官方网站也可以。

然后输入对应的账户密码+验证即可。

发布

执行 npm publish 上传代码到npm包管理库

报错：

  [plaintext]
1
npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/monitor-web - You do not have permission to publish "monitor-web". Are you logged in as the correct user?

比较奇怪，明明已经做了登录。

后来查了一下，也可能是因为仓库的名称已经重复了。

ps: npm 名称作为唯一的标识，所以很容易重复。

修正

把 package.json 的名字改了一下，发布成功。

  [plaintext]
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
λ npm publish
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm notice
npm notice �  houbb-monitor-web@1.0.0
npm notice === Tarball Contents ===
npm notice 2.1kB  CHANGELOG.md
npm notice 3.4kB  CNPM_INIT.md
npm notice 2.2kB  README.md
npm notice 258B   cgit.bat
npm notice 980B   example/hello.html
npm notice 969B   example/perf.html
npm notice 30.6kB index.js
npm notice 567B   package.json
npm notice 47B    source/error.js
npm notice 599B   source/errorXHR.js
npm notice 30.6kB source/monitor-web.js
npm notice === Tarball Details ===
npm notice name:          houbb-monitor-web
npm notice version:       1.0.0
npm notice filename:      houbb-monitor-web-1.0.0.tgz
npm notice package size:  12.2 kB
npm notice unpacked size: 72.3 kB
npm notice shasum:        d6d973aff774bc747ddac5bfeb09564ae2961ec3
npm notice integrity:     sha512-OnDq/qvjBHqTa[...]0Ubju68fZmeaA==
npm notice total files:   11
npm notice
npm notice Publishing to https://registry.npmjs.org/
+ houbb-monitor-web@1.0.0

使用

到这里，如果没报错的话，你的代码库就成功提交到npm库了，cnpm会自动将npm中的代码库同步到国内镜像，所以也可以使用cnpm进行部署（刚发布的代码库相对npm有些延迟，cnpm同步频率为10分钟，我自己测试了一下，如果代码量少的话一两分钟就能实现代码同步）

使用（在你需要使用这个库的项目中部署就行了）

npm install

  [plaintext]
1
npm install houbb-monitor-web --save

CDN

cdn 的引入方式：

  [xml]
1
<script src="https://cdn.jsdelivr.net/npm/houbb-monitor-web@1.0.0/index.js"></script>

参考资料

https://www.cnblogs.com/yalong/p/15214644.html