5

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

 1 year ago
source link: https://blog.51cto.com/hullqin/5569305
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

大家好，我是公众号「线下聚会游戏」作者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

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

模版 描述
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项目。

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

改动一些内容

在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 [email protected] # xxxx是你的包名，@后面是它的版本号

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

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK