我推荐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包版本号感兴趣的可以去搜一下。
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！