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

理由如下：,以上是我认为最大的便捷之处。当然它还有更多好处：自带了Prettier、ESLint便于规范代码风格，自带了JEST方便做测试，提供了一些项目模版等。当然这些你不用也可，对我们的开发完全没影响。,运行该命令，会新建组件开发的文件夹。(
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默认的代码：,发布前，需要先编译：,在 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 噢～我有空了会分享做游戏的相关技术。,所以，在
example/index.tsx中，我们写一些使用我们npm包的案例，不仅方便开发时的测试，也可以作为我们npm包的“最佳实践”，一举两得。,默认支持CommonJS、UMD、ES Module打包方式。（要开发通用的NPM包，这些的支持是必要的，不然你还得自己搞）,自带开发环境、编译脚本。 开发NPM包你必须要解决的一个问题：开发时有地方调试，发布时再build & pub（如果每次调试前都要build，效率超低的），但是tsdx帮你配好了开发环境，用于边写代码边调试。,默认使用TypeScript。 TypeScript的类型定义确实可以提升开发体验和效率，如果你没用过，从现在开始使用吧！（我也是在开发第一个NPM包时学习了TypeScript）当然不用也可，它支持JavaScript。,

大家好，我是公众号「线下聚会游戏」作者HullQin，开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏。

如何开发一个NPM包供其它项目使用？

我们在开发React项目时，有各种脚手架供我们选择（Create React App、Umi、NextJS等），他们默认配置好了Webpack等，极大提高了开发效率。

那么如何开发NPM包呢？有类似的脚手架吗？

我推荐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

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

我们选择第二个，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项目。

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

改动一些内容

在src/index.tsx中，默认有如下内容：

import * as React from 'react';

// Delete me
export const Thing = () => {
  return <div>the snozzberries taste like snozzberries</div>;
};

注意，src/index.tsx中export的内容，就是我们的npm包要导出的内容。例如上面代码，导出了Thing，如果npm包名字是my-package，将来发布后，需要这样引入：

import { Thing } from 'my-package';

接下来，看看example/index.tsx的内容：

import 'react-app-polyfill/ie11';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Thing } from '../.';

const App = () => {
  return (
    <div>
      <Thing />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

本地测试时，我们肯定不能先发布再去测试，TSDX的做法比较好，它是这么做的：

import { Thing } from '../.'; // 就是example/index.tsx的第4行

意思是去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默认的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Playground</title>
  </head>

  <body>
    <div id="root"></div>
    <script src="./index.tsx"></script>
  </body>
</html>

发布npm包

发布前，需要先编译：

npm build # or yarn build

在 https://www.npmjs.com/ 注册账号。

然后看看package.json，注意包名（package.json中的name字段），不能和已有的包名冲突，发布前可以写写package.json中的description和keywords字段，以及根目录下的README.md文件，他们都会放在npm官网上展示，清晰的描述更容易让人看懂这个包的用途。

接下来，就可以发布啦！

先在shell登陆npm（只需操作一次，之后不必了）：

npm login

发布npm包的脚本：

npm publish

发布错了也不要着急，你可以：

npm unpublish xxxx@0.1.0 # xxxx是你的包名，@后面是它的版本号

以后再次发布时，版本号必须不同。本文不再多讲啦，对npm包版本号感兴趣的可以去搜一下。

我是HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。