使用脚手架 快速开发 React组件 npm包 (基于TSDX)

Posted 2022-08-12 HullQin

我推荐TSDX

理由如下：

1. 默认支持CommonJS、UMD、ES Module打包方式。（要开发通用的NPM包，这些的支持是必要的，不然你还得自己搞）
2. 自带开发环境、编译脚本。 开发NPM包你必须要解决的一个问题：开发时有地方调试，发布时再build & pub（如果每次调试前都要build，效率超低的），但是tsdx帮你配好了开发环境，用于边写代码边调试。
3. 默认支持TreeShaking，有效减小项目体积。（别人可能只想import一部分，不希望一次性引入整个包，导致他们项目体积过大）
4. 默认使用TypeScript。 TypeScript的类型定义确实可以提升开发体验和效率，如果你没用过，从现在开始使用吧！（我也是在开发第一个NPM包时学习了TypeScript）当然不用也可，它支持javascript。

以上是我认为最大的便捷之处。当然它还有更多好处：自带了Prettier、ESLint便于规范代码风格，自带了JEST方便做测试，提供了一些项目模版等。当然这些你不用也可，对我们的开发完全没影响。

让我们开始体验TSDX吧！

运行该命令，会新建组件开发的文件夹。(mylib就是项目名)

npx tsdx create mylib

中途我们会被要求选择一个模版：

模版	描述
basic	用于一个TypeScript包，可以开发任何东西，灵活度高
react	用于开发React组件的包，内置了@types，而且有一个基于Parcel的调试模块，帮助快速开发
react-with-storybook	与react模版相同，但是多内置了storybook

我们选择第二个，react模版。

在mylib文件夹下，src文件夹是让你写源码的，example是让你开发调试用的文件夹，里面也是源码（使用你npm包的源码），dist是你编译后的输出目录，在npm pub时就会把dist上传到npm上。

运行我们的第一个项目

每次开发时，需要打开2个shell（一个用于实时编译到dist，另一个用于example的调试）

用于实时编译的shell：

npm start # or yarn start

用于实时调试的shell：

cd example
npm i # or yarn install
npm start # or yarn start

前者会实时监测代码变更，编译最新的版本到dist中，后者会监测dist变更，将example中的内容启动，默认在 http://127.0.0.1:1234/ 运行example项目。

现在你可以去试着写一些内容，看看有没有生效