尝试在 NPM 上发布了第一个库：JavaScript-Table-Editor

陪她去流浪 桃子 阅读次数：181

之前找可视化编辑器的时候，试用了网上搜索到的各种开源编辑器的表格编辑器（自带或者是第三方插件），均不满足我的需求（太烂或者常见功能没有）。 所以我就自己写了一个，纯 JavaScript 实现。直到发版前都只有两个文件：index.html 和 table.js。然后靠一个简单的文件服务器服务静态文件完成全部的编写与调试功能。

刚刚觉得是不是可以拆出来、独立成一个库发布到 NPM 上？从来没有这样搞过，于是尝试了一把，纯当好玩儿。

从仓库独立

在原来的项目上是在一个新的分支、新的目录下开发完成的，所以第一步是需要把代码独立成仓库，直接用 git-filter-repo 就可以完成。同时也可能需要借助 git rebase 一把梭。然后添加了 README 文件。

变成一个比较标准的包结构

用 GPT 简单了解了一下 NPM 的发布流程。在项目的根目录下执行了 npm init，一顿回车就完成了 package.json 的创建，一切默认。 好在 npm 比较智能，自动从 README 和 GIT 里面解析出了描述、仓库地址等信息填上去了。

至此，这个独立仓库已经有 4️⃣ 个文件了：

  1. README.md
  2. package.json
  3. index.html
  4. table.js

注册 NPM 账号

打开 NPM 官网的第一眼我才发现：NPM 啥时候、居然是 GitHub 的了？

We're GitHub, the company behind the npm Registry and npm CLI. We offer those to the community for free, but our day job is building and selling useful tools for developers like you.

看了一下历史才知道，嗯，2020 年 GitHub 收购了 NPM：

In March 2020, npm was acquired by GitHub, which is a subsidiary of Microsoft.

但是好奇怪，为什么收购了5️⃣年之久了为什么还不能直接用 GitHub 账号登录？居然还要自己填写用户名、邮箱以及密码。太奇怪了。

好了，注册非常轻松。然后就是在设置里面创建 Access Token，创建好后就在终端登录即可，会在网页上进行：

1
2
3
4
5
6
7

$ npm login 
npm notice Log in on https://registry.npmjs.org/
Login at:
https://www.npmjs.com/login?next=/login/cli/308dc72b-e3dd-470e-8dec-c558xxxxxxxx
Press ENTER to open in the browser...

Logged in on https://registry.npmjs.org/.

最神奇的一步：发布

我看别人的仓库都好复杂啊，一堆的 lint 配置，一堆的目录。于是我又一把梭，直接 npm publish，我靠，直接成功了，没有任何警告错误。这也太“草台”了吧？🤣🤣

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

$ npm publish
npm notice
npm notice 📦  javascript-table-editor@1.0.0
npm notice Tarball Contents
npm notice 356B README.md
npm notice 2.6kB index.html
npm notice 552B package.json
npm notice 50.9kB table.js
npm notice Tarball Details
npm notice name: javascript-table-editor
npm notice version: 1.0.0
npm notice filename: javascript-table-editor-1.0.0.tgz
npm notice package size: 13.8 kB
npm notice unpacked size: 54.4 kB
npm notice shasum: 29768a9f2d8820a327d13a914124920ad689f2a0
npm notice integrity: sha512-5Odr66xK8luSg[...]Oxo4JN6wjVPqg==
npm notice total files: 4
npm notice
npm notice Publishing to https://registry.npmjs.org/ with tag latest and default access
+ javascript-table-editor@1.0.0

不是，我这连包都没有打，你就直接把我整个目录给发布了啊？隐隐约约觉得 node_modules 有点不妙。

最终的 URL 是：https://www.npmjs.com/package/javascript-table-editor。没有用户名限定项目名就算了，“javascript-table-editor”这么随意的名字竟然也没有被人占用吗？太离谱了，感觉自己捡了个大漏。😅😅😅

没了

体验了一把“祸害”世界的感觉，收工。接下来还是准备 minify 一下，顺便打个 umd 的包，弄个 GitHub Actions 自动发版。

  • 等 🈶️ 🈳️。