有了工程 0.1 版，就可以发布在仓库中供用户反馈和根据反馈来改进了，一般常见的这种改进意见的互动在 github 上的 issues 里可以看到。本篇先把发布流程和维护流程连接起来。
本篇介绍发布工具的环节
NPM 发布
如果没有 npm 账号，需要在https://www.npmjs.com上注册一个自己发布用的账号，需要绑定邮箱，如图
接着需要明确设置 npm 的源
> npm config set registry http://registry.npmjs.org
复制代码
然后检查设置结果是否正确
> npm config get registryhttp://registry.npmjs.org
复制代码
然后登录 npm 账号
tim@Tim ~ % npm loginUsername: windbringersPassword: Email: (this IS public) windbringers@163.comLogged 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<HTMLDivElement>; 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.jsindex 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( <React.StrictMode>- <App />+ <TWM /> </React.StrictMode>, document.getElementById('root') );
复制代码
修改完成后进行 npm publish 提交
tim@Tim tools-webkit-memory % npm publish npm notice npm notice 📦 tools-webkit-memory@0.1.0npm 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.jsnpm 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.tsnpm 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: 4764bc395c693f287abac961f66ae76218925c51npm notice integrity: sha512-MsHx4tt8vFnj6[...]8LukTg/J+uGyg==npm notice total files: 27 npm notice + tools-webkit-memory@0.1.0tim@Tim tools-webkit-memory %
复制代码
现在就提交成功了，可以到搜索一下
tim@Tim tools-webkit-memory % npm info "tools-webkit-memory"
tools-webkit-memory@0.1.0 | ISC | deps: 12 | versions: 1Webkit memory monitorhttps://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 <windbringers@163.com>
dist-tags:latest: 0.1.0
published a minute ago by windbringers <windbringers@163.com>tim@Tim tools-webkit-memory %
复制代码
这个时候，到 npm 官方页搜索，可以找到这个库的页面，首页和改进意见的互动入口也可以看到：
写到这里，大家也发现好像哪里有些不对。确实，readme 文件没写，被发布到仓库了。。。
这里就更改一下 readme，帮助用户使用。
然后再更改一下 package.json 中的版本，这个版本规则可以参考semver
..."version": "0.1.1",...
复制代码
修改以后，再进行 npm publish，就可以看到 npm 上的页面更新了
今天发布工具就先介绍到这里，有了这套流程，工具的长期迭代就可以有迹可循了。
评论