借助webpack打包typescript版纯js库(web组件)一种方法

最新推荐文章于 2024-05-15 01:35:51 发布

福平

最新推荐文章于 2024-05-15 01:35:51 发布

阅读量950

点赞数 11

文章标签：前端 webpack web typescript javascript

本文链接：https://blog.csdn.net/kongchao12/article/details/135919822

版权

一.目标

使用typescript(收下简称ts)语言编写javascript(收下简称js)类库，可以被js项目用作第三方中间件库。js类库要求遵循模块规范(CommonJS/同步运行时加载、AMD/异步加载依赖前置、CMD/异步加载依赖就近、ES6/静态编译)，前端项目使用此类库时即可以通过script 标签引用，也可以在ts模块中通过import导入引用。

二.关键技术

1.应用场景

假设三个前端项目A、B和C，A和B是js库，C是应用方。A被B和C同时引用，C同时引用A和B。A是第三方js库(一般分为三种类别：全局类库、模块类库、UMD库)。B借助webpack进行打包，使用ts自己编写的js库。C使用ts语言调用A和B。

2.ts使用第三方js库

ts项目引用JS类库时，需要js库的声明文件对外暴露API。有时候声明文件在源码中，大部分是单独提供额外安装。大部分类库，TS社区都有声明文件，可以在npm的typings查找获取，或者在微软(http://microsoft.github.io/TypeSearch)网站搜名称为types/类库名。ts模块对导入模块的变量、对象是动态引用，遇到模块加载命令import时不会去执行模块，只是生成一个指向被加载模块的引用。webpack打包时遇到模块加载命令import不会将引用库打包到代码中，只有被引用库同时被使用，才会将此库打包进代码。

3.webpack外部化第三方依赖库

类库项目使用第三方库时，打包后会发现创建了一个体积相当大的文件。如果你查看这个文件，会看到第三方库也被打包到代码中。大多数场景，我们更倾向于把第三方库当作 外部依赖，即使用者(consumer)应该已经安装过此第三方库(library) ，因此，库开发者就可以放弃控制此外部库，而是将控制权让给使用库的使用者。

前端项目将第三方库以外部依赖方式引入时，常规上有解决方案。方案一,借助打包工具(如,webpack等)对外部依赖功能的支持实现外部化依赖库；方案二，通过script标签将第三方库引入全局作用域，库使用代码段通过declare关键字引入any类型的全局变量间接使用库对象。