打包自己的 TypeScript 组件库，并上传到 NPM
为什么是 TypeScript ？
TypeScript 是一个增加了静态类型系统的 JavaScript 超集。它其余的特性则相当密切地遵循了当前和未来的 ECMAScript 规范。对于组件库作者来说，这意味着即便是不实际使用 TypeScript 开发的用户，他们所使用的能对 TypeScript 智能处理的 编辑器/IDE（比如 Visual Studio Code）也能给出更友好的自动完成等。在编写代码时，当你传入某些错误的东西，TypeScript 也能充当行内文档做出及时提醒，这将解救你在面对自己几个月前开发的代码一筹莫展之时。
为什么是 microbundle ？
microbundle 号称 “微小组件的零配置打包器”。它是一个围绕 rollup 构建的包装器，包含了健全的默认功能（如最小化/压缩）、美观的打包体积输出、多目标格式（ES modules, CommonJS, UMD）。而在本文范围内最重要的是，其拥有开箱即用的 TypeScript 支持（真正的 无配置，甚至不用 tsconfig.json 也行）。其简单到离谱的设置使得组件库作者可以聚焦于构建一个极好的库，而非为了把 ES6/TypeScript 等编译为 JS 大费周章 。
用 microbundle 零配置打包
用 vscode 来创建项目（这里不需要 为什么是 vscode ?? 了吧)
- 用 vscode 打开一个你的项目目录(新建)
- 创建组件包的设置，在终端中输入下列指令，运行后完成各项参数
npm init
- 创建源文件和目标文件夹
mkdir src && mkdir dist
- 以及添加首个 TypeScript 文件
# 手动在 vscode 中 src 目录下新建 index.ts 或者用指令
touch src/index.ts
- 在index.ts 中添加代码
# 手动在 src/index.ts 中输入，或者用指令
echo "export class GameRoot {}" >> src/index.ts
- 打开 package.json 修改和添加代码
{
...
"main": "dist/index.js",
"source": "src/index.ts"
...
}
microbundle 会检查 package.json 中的 "main" 和 "source" 选项（编译后的入口文件和源入口文件），在本例中也就是 dist/index.js和 src/index.ts。
- 使用 microbundle 编译我们的组件库
npx microbundle
# 当 npm < 5.x 时，也可以运行 ./node_modules/.bin/microbundle
# 运行后 microbundle 会将 src/index.ts 编译到 dist 目录中
文件解析
打开 dist 目录，可以看到生成了很多文件：
- index.js 是 CommonJS 模块。这是一种被 NodeJS 使用的模块类型，看起来像 const myModule = require('my-module')
- index.m.js 是 ECMAScript 模块，由 ES6 定义，看起来类似 import MyModule from 'my-module'
- index.umd.js 是 UMD 模块
- index.d.ts 是 TypeScript 类型描述文件
- *.map 是为每个文件提供到 TypeScript 源文件的映射。
看看 index.js 的内容
cat dist/index.js
var n=function(){return function(){}}();exports.GameRoot=n;
//# sourceMappingURL=index.js.map
我们的 class GameRoot {} 语句被编译为其 ES5 的等价实现，并导出为一个 CommonJS 模块。
再来看看 index.d.ts
cat dist/index.d.ts
export declare class GameRoot {
}
这允许了一个 TypeScript 项目将正确的类型信息反向指派给组件包 -- 通过这种间接方式，完成了本来要引入 .ts 文件才能达到的类型识别目标。单独的类型声明文件意味着非 TypeScript 项目也可以理解模块的公共 API （例如代码编辑器可以对 npm 包中引用的代码智能自动完成）。
扩展操作
为便于使用我们可以将 watch 和 build 任务作为 npm scripts 放置在 package.json 中：
{
...
"scripts": {
...
"dev": "microbundle watch",
"build": "microbundle"
}
...
}
然后我们可以使用下列指令来执行他：
npm run build -- 编译
num run dev -- 监听文件改变
将 microbundle 构建的模块发布到 NPM
借助 microbundle 可以将模块发布为 CommonJS 模块（标准的 npm 模块），但也能作为 ES Module 和 UMD 模块，按官网文档设置即可，继续来修改 package.json。
{
...
"source": "src/index.ts",
"main": "dist/index.umd.js",
"module": "dist/index.modern.module.js",
"types": "dist/index.d.ts",
...
}
将 package.json 如此配置后就可以通过 npm publish 发布到 npm 了。
