原文：https://codewithhugo.com/microbundle-typescript-npm-module/前端
为何是 TypeScript ？
TypeScript 是一个增长了静态类型系统的 JavaScript 超集。它其他的特性则至关密切地遵循了当前和将来的 ECMAScript 规范。对于组件库做者来讲，这意味着即使是不实际使用 TypeScript 开发的用户，他们所使用的能对 TypeScript 智能处理的 编辑器/IDE（好比 Visual Studio Code）也能给出更友好的自动完成等。在编写代码时，当你传入某些错误的东西，TypeScript 也能充当行内文档作出及时提醒，这将解救你在面对本身几个月前开发的代码束手无策之时。node
为何是 microbundle ？
microbundle 号称 “微小组件的零配置打包器”。它是一个围绕 rollup 构建的包装器，包含了健全的默认功能（如最小化/压缩）、美观的打包体积输出、多目标格式（ES modules, CommonJS, UMD）。而在本文范围内最重要的是，其拥有开箱即用的 TypeScript 支持（真正的 无配置，甚至不用 tsconfig.json 也行）。其简单到离谱的设置使得组件库做者能够聚焦于构建一个极好的库，而非为了把 ES6/TypeScript 等编译为 JS 大费周章 🙂。web
用 microbundle 零配置打包
首先，咱们得经过 npm init 建立组件包的设置，运行之并完成全部提示性选项。typescript
接下来运行：npm i --save-dev microbundle.npm
建立源文件和目标文件夹：mkdir src && mkdir distjson
以及添加首个 TypeScript 文件：touch src/index.ts.微信
为 index.ts 增添一个类，这样咱们就不至于编译空文件了：echo "export class MyMainClass {}" >> src/index.ts并发
microbundle 会检查 package.json 中的 "main" 和 "source" 选项（编译后的入口文件和源入口文件），在本例中也就是 dist/index.js（尚不存在）和 src/index.ts。如今动手在 package.json 中加入这两项：app
{
"main": "dist/index.js",
"source": "src/index.ts"
}
这意味着 microbundle 如今知晓了如何编译咱们的组件库，运行 npx microbundle （当 npm < 5.x 时，也能够运行 ./node_modules/.bin/microbundle）。编辑器
这会将你的 src/index.ts 编译到 dist 文件夹中。若是查看后者的内容，你将看到 microbundle 为你作了多少工做：
ls dist
index.d.ts index.js.map index.m.js.map index.umd.js.map
index.js index.m.js index.umd.js
来看一下这都是些什么：
-
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.MyMainClass=n;
//# sourceMappingURL=index.js.map
咱们的 class MyMainClass {} 语句被编译为其 ES5 的等价实现，并导出为一个 CommonJS 模块。
index.d.ts 一样有趣：
cat dist/index.d.ts
export declare class MyMainClass {
}
这容许了一个 TypeScript 项目将正确的类型信息反向指派给组件包 -- 经过这种间接方式，完成了原本要引入 .ts 文件才能达到的类型识别目标。单独的类型声明文件意味着非 TypeScript 项目也能够理解模块的公共 API （例如代码编辑器能够对 npm 包中引用的代码智能自动完成）。
microbundle 也能监视文件改变：npx microbundle watch。
为便于使用咱们能够将 watch 和 build 任务做为 npm scripts 放置在 package.json 中：
{
"scripts": {
"dev": "microbundle watch",
"build": "microbundle"
}
}
将 microbundle 构建的模块发布到 NPM
借助 microbundle 能够将模块发布为 CommonJS 模块（标准的 npm 模块），但也能做为 ES Module 和 UMD 模块，按官网文档设置便可。
tl;dr
-
"source": "src/index.ts" -
"main": "dist/index.umd.js" -
"module": "dist/index.modern.js" -
"types": "dist/index.d.ts"
换言之，package.json 看起来应该是相似这样的：
{
"// other": "fields",
"source": "src/index.ts",
"main": "dist/index.umd.js",
"module": "dist/index.modern.module.js",
"types": "dist/index.d.ts",
"// more": "fields"
}
将 package.json 如此配置后就能够经过 npm publish 发布到 npm 了。
--End--
查看更多前端好文
请搜索 fewelife 关注公众号
转载请注明出处
本文分享自微信公众号 - 云前端（fewelife）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。