自建开发工具系列-Webkit内存动量监控UI（六）
有了工程0.1版，就可以发布在仓库中供用户反馈和根据反馈来改进了，一般常见的这种改进意见的互动在github上的issues里可以看到。本篇先把发布流程和维护流程连接起来。
本篇介绍发布工具的环节
NPM发布
如果没有npm账号，需要在https://www.npmjs.com上注册一个自己发布用的账号，需要绑定邮箱，如图
接着需要明确设置npm的源
> npm config set registry http://registry.npmjs.org
然后检查设置结果是否正确
> npm config get registry
http://registry.npmjs.org
然后登录npm账号
tim@Tim ~ % npm login
Username: windbringers
Password:
Email: (this IS public) windbringers@163.com
Logged in as windbringers on https://registry.npmjs.org/.
成功登录会显示用户名和仓库源地址。
长期维护一个工具，需要改进意见的互动在github上的issues里可以看到，这个时候就需要更改一下package.json中的提交信息, 下面示范了从原package.json 做的更改
--- a/package.json
+++ b/package.json
@@ -1,7 +1,19 @@
{
"name": "tools-webkit-memory",
"version": "0.1.0",
- "private": true,
+ "description": "Webkit memory monitor",
+ "main": "lib/App.js",
+ "private": false,
+ "author": "windbringers",
+ "license": "ISC",
+ "repository": {
+ "type": "git",
+ "url": "https://gitee.com/windbringer/tools-webkit-memory.git"
+ },
+ "bugs": {
+ "url": "https://gitee.com/windbringer/tools-webkit-memory/issues"
+ },
+ "homepage": "https://gitee.com/windbringer/tools-webkit-memory",
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
输出的模块名和在index.js的名字也统一改一下（只是为了维护时看起来清晰）
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,7 +3,7 @@ import './App.css';
import displayPanel from './utils';
import { TWMProps, UtilsInterfaces } from './config/api';
-class App extends React.Component {
+class TWM extends React.Component {
toolsNode: React.RefObject;
twm: UtilsInterfaces;
@@ -35,4 +35,4 @@ class App extends React.Component {
}
}
-export default App;
+export default TWM;
diff --git a/src/index.js b/src/index.js
index ef2edf8..15fe1a0 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,12 +1,12 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
-import App from './App';
+import TWM from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
- ,
document.getElementById('root')
);
修改完成后进行npm publish提交
tim@Tim tools-webkit-memory % npm publish
npm notice
npm notice 📦 tools-webkit-memory@0.1.0
npm notice === Tarball Contents ===
npm notice 1.7kB change
npm notice 564B src/App.css
npm notice 366B src/index.css
npm notice 1.7kB public/index.html
npm notice 3.9kB public/favicon.ico
npm notice 77B lib/config/api.js
npm notice 3.1kB lib/App.js
npm notice 246B src/App.test.js
npm notice 500B src/index.js
npm notice 362B src/reportWebVitals.js
npm notice 241B src/setupTests.js
npm notice 4.0kB lib/utils.js
npm notice 492B public/manifest.json
npm notice 1.4kB package.json
npm notice 321B tsconfig.json
npm notice 3.4kB README.md
npm notice 5.3kB public/logo192.png
npm notice 9.7kB public/logo512.png
npm notice 2.6kB src/logo.svg
npm notice 286B lib/config/api.d.ts
npm notice 267B src/config/api.ts
npm notice 342B lib/App.d.ts
npm notice 40B src/react-app-env.d.ts
npm notice 112B lib/utils.d.ts
npm notice 3.9kB src/utils.ts
npm notice 972B src/App.tsx
npm notice 67B public/robots.txt
npm notice === Tarball Details ===
npm notice name: tools-webkit-memory
npm notice version: 0.1.0
npm notice package size: 30.7 kB
npm notice unpacked size: 45.8 kB
npm notice shasum: 4764bc395c693f287abac961f66ae76218925c51
npm notice integrity: sha512-MsHx4tt8vFnj6[...]8LukTg/J+uGyg==
npm notice total files: 27
npm notice
+ tools-webkit-memory@0.1.0
tim@Tim tools-webkit-memory %
现在就提交成功了，可以到搜索一下
tim@Tim tools-webkit-memory % npm info "tools-webkit-memory"
tools-webkit-memory@0.1.0 | ISC | deps: 12 | versions: 1
Webkit memory monitor
https://gitee.com/windbringer/tools-webkit-memory
dist
.tarball: https://registry.npmjs.org/tools-webkit-memory/-/tools-webkit-memory-0.1.0.tgz
.shasum: 4764bc395c693f287abac961f66ae76218925c51
.integrity: sha512-MsHx4tt8vFnj6dOybpQGi5JtXXIXtmdvWX91RP1qD8MDMhqra2hFPBglnwI8lRsR4mYJMQgIX8LukTg/J+uGyg==
.unpackedSize: 45.8 kB
dependencies:
@testing-library/jest-dom: ^5.11.4 @types/react: ^17.0.14
@testing-library/react: ^11.1.0 react-dom: ^17.0.2
@testing-library/user-event: ^12.1.10 react-scripts: 4.0.3
@types/jest: ^26.0.24 react: ^17.0.2
@types/node: ^16.3.1 typescript: ^4.3.5
@types/react-dom: ^17.0.9 web-vitals: ^1.0.1
maintainers:
- windbringers
dist-tags:
latest: 0.1.0
published a minute ago by windbringers
tim@Tim tools-webkit-memory %
这个时候，到npm官方页搜索，可以找到这个库的页面，首页和改进意见的互动入口也可以看到：
写到这里，大家也发现好像哪里有些不对。确实，readme文件没写，被发布到仓库了。。。
这里就更改一下readme，帮助用户使用。
然后再更改一下 package.json 中的版本，这个版本规则可以参考
...
"version": "0.1.1",
...
修改以后，再进行npm publish，就可以看到npm上的页面更新了
今天发布工具就先介绍到这里，有了这套流程，工具的长期迭代就可以有迹可循了。