专栏首页云前端[译] 使用 microbundle 打包 TypeScript 组件库

[译] 使用 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 了。

本文分享自微信公众号 - 云前端(fewelife),作者:云前端

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-08-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Web Bundler CheatSheet, 选择合适的构建打包工具

    题注:Web Bundler CheatSheet 属于 Awesome-CheatSheet 系列,盘点数个常用的开发打包工具清单。欢迎加入阿里南京前端团队,...

    王下邀月熊
  • 使用webpack和rollup打包组件库

    之前做了一个loading的样式组件,为了实现代码的可重用性,将这个小项目打包并且发布在了npm上。在一次次的打包发包过程中经历了一个又一个报错,@buzuos...

    不作声
  • 前端每周清单第 44 期: 2017 JS 调查报告、REST 接口实时化、ESM 的过去与未来

    前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注...

    王下邀月熊
  • [技术地图]

    在React 组件设计实践总结 03 - 样式的管理一文中吹了一波 styled-components 后,本文想深入来了解一下 styled-componen...

    _sx_
  • 可能是目前最详细从零开始配置 TypeScript 项目的教程

    本文出自于掘金的子弈[1],原文链接 从零开始配置 TypeScript 项目[2]。

    桃翁
  • 使用typescript rollup storybook创建你的react组件库

    lilugirl
  • [译]如何用 Typescript 写一个完整的 Vue 应用程序

    译者推荐:Typescript 和 Vue 都是现在前端必备的知识,本文基本覆盖了目前 Vue 2.x 的一些基础用法的 Typescript 版本实现,感兴趣...

    GopalFeng
  • 【TypeScript 演化史 — 第十二章】ES5/ES3 的生成器和迭代支持及 –checkJS选项下 .js 文件中的错误

    TypeScript 2.3 引入了一个新的--downlevelIteration标志,为以 ES3 和 ES5 目标添加了对 ES6 迭代协议的完全支持。f...

    Javanx
  • Vue.js 2.5新特性介绍

    TypeScript TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和...

    xiangzhihong
  • React、TypeScript、NodeJS 和 MongoDB 搭建 Todo App

    在本教程中,我们将在服务器和客户端使用 TypeScript、React、NodeJS、Express 和 MongoDB 从头开始构建一个 Todo 应用程序...

    前端迷
  • 十分钟了解 TypeScript 是如怎样工作的

    本文概述了 TypeScript 的工作原理:典型的 TypeScript 项目的结构是什么?什么被编译以及怎样编译?我们如何使用 IDE 编写 TypeScr...

    疯狂的技术宅
  • 前端组件/库打包利器rollup使用与配置实战

    写rollup的文章是因为笔者最近要规范前端开发的业务流程和架构,并提供内部公有组件库和工具库供团队使用。在查阅大量资料并对比了webpack和rollup的优...

    徐小夕
  • 了不起的 tsconfig.json 指南

    在 TypeScript 开发中,tsconfig.json 是个不可或缺的配置文件,它是我们在 TS 项目中最常见的配置文件,那么你真的了解这个文件吗?它里面...

    pingan8787
  • TypeScript 2.6 来了!

    TypeScript 2.6 在万圣节出现啦!不过不用怕,我们在这个版本中准备了很多好玩的东西。

    疯狂的技术宅
  • Webpack+vue+boostrap+ejs构建Web版GM工具

    Web前端的组件技术刷新真的是日新月异,前段时间看到很多童鞋分享了webpack的使用,刚好之前做我们游戏里Web版的GM工具的时候正在想怎么用简单的方式,做模...

    owent
  • 30个小知识让你更清楚TypeScript

    TypeScript 是 Microsoft 开发的JavaScript 的开源超集,用于在不破坏现有程序的情况下添加附加功能。

    winty
  • 30道TypeScript 面试问题解析

    TypeScript 是 Microsoft 开发的JavaScript 的开源超集,用于在不破坏现有程序的情况下添加附加功能。

    前端达人
  • 「React TS3 专题」从创建第一个 React TypeScript3 项目开始

    笔者将介绍两种方式进行构建 React TS3 ( TypeScript3 简称,后面的内容都会以简称出现),分别为使用 create-react-app 进行...

    前端达人
  • 初次在Vue项目使用TypeScript,需要做什么

    总所周知,Vue新版本3.0 使用 TypeScript 开发,让本来就很火的 TypeScript 受到更多人的关注。虽然 TypeScript 在近几年才火...

    WahFung

扫码关注云+社区

领取腾讯云代金券