使用脚手架 快速开发 React 组件 npm 包 (基于 TSDX)
我是 HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者 HullQin 授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》参加 Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。
如何开发一个 NPM 包供其它项目使用？
我们在开发 React 项目时，有各种脚手架供我们选择（Create React App、Umi、NextJS 等），他们默认配置好了 Webpack 等，极大提高了开发效率。
那么如何开发 NPM 包呢？有类似的脚手架吗？
我推荐TSDX
理由如下：
默认支持 CommonJS、UMD、ES Module 打包方式。（要开发通用的 NPM 包，这些的支持是必要的，不然你还得自己搞）
自带开发环境、编译脚本。 开发 NPM 包你必须要解决的一个问题：开发时有地方调试，发布时再 build & pub（如果每次调试前都要 build，效率超低的），但是 tsdx 帮你配好了开发环境，用于边写代码边调试。
默认支持 TreeShaking，有效减小项目体积。（别人可能只想 import 一部分，不希望一次性引入整个包，导致他们项目体积过大）
默认使用 TypeScript。 TypeScript 的类型定义确实可以提升开发体验和效率，如果你没用过，从现在开始使用吧！（我也是在开发第一个 NPM 包时学习了 TypeScript）当然不用也可，它支持 JavaScript。
以上是我认为最大的便捷之处。当然它还有更多好处：自带了 Prettier、ESLint 便于规范代码风格，自带了 JEST 方便做测试，提供了一些项目模版等。当然这些你不用也可，对我们的开发完全没影响。
让我们开始体验 TSDX 吧！
运行该命令，会新建组件开发的文件夹。(mylib就是项目名)
中途我们会被要求选择一个模版：
我们选择第二个，react 模版。
在mylib文件夹下，src文件夹是让你写源码的，example是让你开发调试用的文件夹，里面也是源码（使用你 npm 包的源码），dist是你编译后的输出目录，在npm pub时就会把dist上传到 npm 上。
运行我们的第一个项目
每次开发时，需要打开 2 个 shell（一个用于实时编译到 dist，另一个用于 example 的调试）
用于实时编译的 shell：
用于实时调试的 shell：
前者会实时监测代码变更，编译最新的版本到 dist 中，后者会监测 dist 变更，将 example 中的内容启动，默认在 http://127.0.0.1:1234/ 运行 example 项目。
现在你可以去试着写一些内容，看看有没有生效😄
改动一些内容
在src/index.tsx中，默认有如下内容：
注意，src/index.tsx中 export 的内容，就是我们的 npm 包要导出的内容。例如上面代码，导出了 Thing，如果 npm 包名字是my-package，将来发布后，需要这样引入：
接下来，看看example/index.tsx的内容：
本地测试时，我们肯定不能先发布再去测试，TSDX 的做法比较好，它是这么做的：
意思是去example文件夹的上一层来导入，它会发现上层文件夹的package.json，根据里面的module或main来 import 到相应的内容（这些都不需要我们关心，因为它已经定义好了"module": "dist/mylib.esm.js",和"main": "dist/index.js"）。
所以，在example/index.tsx中，我们写一些使用我们 npm 包的案例，不仅方便开发时的测试，也可以作为我们 npm 包的“最佳实践”，一举两得。
此外，可以关注一下example/index.html，使用 example 测试时，TSDX 实际上是基于parcel的，会基于index.html生成网页，展示example/index.tsx中的案例。如果你需要修改 html 中的内容，你可以直接修改，也是非常方便的！下面是example/index.html默认的代码：
发布 npm 包
发布前，需要先编译：
在 https://www.npmjs.com/ 注册账号。
然后看看package.json，注意包名（package.json中的name字段），不能和已有的包名冲突，发布前可以写写package.json中的description和keywords字段，以及根目录下的README.md文件，他们都会放在 npm 官网上展示，清晰的描述更容易让人看懂这个包的用途。
接下来，就可以发布啦！
先在 shell 登陆 npm（只需操作一次，之后不必了）：
发布 npm 包的脚本：
发布错了也不要着急，你可以：
以后再次发布时，版本号必须不同。本文不再多讲啦，对 npm 包版本号感兴趣的可以去搜一下。我是 HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者 HullQin 授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》参加 Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。
版权声明: 本文为 InfoQ 作者【HullQin】的原创文章。
原文链接:【http://xie.infoq.cn/article/ee3cf8af3e2c4dba1b48ff209】。文章转载请联系作者。
公众号【线下聚会游戏】 2020.10.07 加入
game.hullqin.cn 我做了一些联机桌游网页：支持2-10人联机的UNO、2-4人联机的斗地主、2人联机的五子棋。无需下载，点开即玩！叫上朋友，即刻开局！不看广告，不做任务，享受「纯粹」的游戏！
评论