如何开发一个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
在 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包版本号感兴趣的可以去搜一下。
