一文教你: 快速上手开发React组件 npm包 (使用TSDX)

最新推荐文章于 2023-04-02 21:40:30 发布

Hull Qin

最新推荐文章于 2023-04-02 21:40:30 发布

阅读量5.7k

点赞数 5

分类专栏：前端 React TSDX 文章标签： javascript react npm 前端 typescript

本文链接：https://blog.csdn.net/kd_2015/article/details/110409238

版权

前端同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

React

6 篇文章 0 订阅

订阅专栏

TSDX

3 篇文章 0 订阅

订阅专栏

如何开发一个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就是项目名)

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 # or npm pub

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

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

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

其它TSDX相关内容

在TSDX中使用 lodash: https://blog.csdn.net/kd_2015/article/details/110456896

Hull Qin

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
3
评论
一文教你: 快速上手开发React组件 npm包 (使用TSDX)

如何开发一个NPM包供其它项目使用？我们在开发React项目时，有各种脚手架供我们选择（Create React App、Umi、NextJS等），他们默认配置好了Webpack等，极大提高了开发效率。那么如何开发NPM包呢？有类似的脚手架吗？我推荐TSDX理由如下：默认支持CommonJS、UMD、ES Module打包方式。（要开发通用的NPM包，这些的支持是必要的，不然你还得自己搞）自带开发环境、编译脚本。开发NPM包你必须要解决的一个问题：开发时有地方调试，发布时再build &.
复制链接

扫一扫