[译] 使用 microbundle 打包 TypeScript 组件库
原文:https://codewithhugo.com/microbundle-typescript-npm-module/
对于那些想要编写一个组件并发布到 npm 上的开发者来说,TypeScript + microbundle 算是一种构建高质量代码库的低成本方式。
为什么是 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 零配置打包
首先,我们得通过 npm init
创建组件包的设置,运行之并完成所有提示性选项。
接下来运行:npm i --save-dev microbundle
.
创建源文件和目标文件夹:mkdir src && mkdir dist
以及添加首个 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
中加入这两项:
{
"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 了。
- 基础篇章:React Native 之 View 和 Text 的讲解
- CentOs7.3 修改主机名
- 基础篇章:React Native之Flexbox的讲解(Height and Width)
- PDF.js专题
- CentOs7.3 编译安装 Nginx 1.9.9
- 基础篇章:关于 React Native 之 RefreshControl 组件的讲解
- CentOs7.3 安装 JDK1.8
- 基础篇章:关于 React Native 之 ListView 组件的讲解
- maven环境快速搭建
- CentOs7.3 搭建 RabbitMQ 3.6 Cluster 集群服务
- CentOs7.3 搭建 Redis-4.0.1 Cluster 集群服务
- CentOs7.3 搭建 Redis-4.0.1 单机服务
- Shodan新手入坑指南
- 我用过的——Spring定时任务的几种用法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【每日一具16】来了!扫描图片批量漂白修正软件
- 实现一个 webpack loader 和 webpack plugin
- 万字长文带你走进 JavaScript 的世界
- windows中常见后门持久化方法总结
- Python3爬虫实战【点触验证码】 — 模拟登陆bilibili
- BOM 是个什么玩意!
- Educational Codeforces Round 81 (Rated for Div. 2) B - Infinite Prefixes
- python-利用python写一个购物小程序
- Java技巧收录一 那些你相见恨晚的快捷键和代码注释模板
- Educational Codeforces Round 81 (Rated for Div. 2) C.Obtain The String
- 深入了解 webpack 模块加载原理
- Java中的数字类解析(包括格式化数字、大数运算等等)
- 数据挖掘领域十大经典算法之—K-邻近算法/kNN(超详细附代码)
- 洛谷 P1019 单词接龙
- SpringBoot 将自制的Starter 发布到远程公服