使用 Babel Webpack 打造库

Photo by Lê Tân on Unsplash

本人工作后一直采用自顶向下的方法自学编程知识。初期的学习曲线就是直接上手框架加第三方类库,加之这些工具都比较成熟,自带转译(Babel)和打包工具(Webpack),故这两类工具的使用较少。今天在编写自己的类库后发现,使用这两种工具还是有很多问题,故记录分享如下。

工具链逻辑

转译(transpile)。Babel 转译工具的作用是将可在最新的 JavaScript 语法转化为可被旧浏览器运行的兼容代码。转译工具不会处理模块之间的依赖关系。Babel 默认会把 import export 等转译为 require 和 module.exports。

打包。在撰写本文的 2020 年,浏览器对 JavaScript 模块化的支持还是很糟糕,因此需要单独的打包工具来将各个模块聚合在一个文件中。而聚合的线索就是转译工具生成的 require 或者 import 语法。

Babel 转码

Babel 使用非常容易,使用在线的配置文件生成器可以生成配置。假如直接使用 babel/cli 工具,我们首先安装以下依赖。其中 @babel/preset-env 为预设插件配置。

然后在项目目录下创建 babel 配置文件 .bablerc。我们可以使用预先定义的 preset。preset 可以理解为预先设定好的 babel 插件的组合,这样我们就不必做插件的配置。

然后我们可以在 npm script 中使用 babel 来转译我们的代码。

需要注意的是默认 Babel 只处理语法,不会根据模块来做一个打包(把所有脚本合并成一个文件)。若直接使用 Babel 转译的结果,则会在浏览器控制台中出现如下错误 Uncaught ReferenceError: require is not defined。

Webpack 打包

webpack 使用也非常简单,难点在于配置文件的设置。首先安装我们需要安装相关依赖。

安装 bable-loader @babel/core。loader 的作用类似 babel 的插件,用于扩展功能。

配置 webpack-config.js。指定入口文件和输出文件路径。并且通过 rules 过滤文件类型、加载 loader。

最后使用 webpack 把脚本打包成一个文件,彻底解决模块依赖问题。

还不够

作为库函数,还需要导出它。但是 webpack 默认并不导出函数,需要在打包时指定。这里使用 library、libraryTarget、libraryExport 进行指定。

在默认情况下,若不指定 LibraryExport, 那所有的函数都要通过 Library.库名来指定。比如要使用 window.fast.fast 的方式。

若设定了 LibraryExport,就可以单独导出某个函数。这样我就可以在浏览器中可以直接使用 window.fast 来全局访问它,而不是使用 window.fast.fast 的方式。奇怪的是,在 webpack 的文档中并没有指出这个区别。

参考链接

Authoring Libraries

multi-part-library

(完)

发表评论

电子邮件地址不会被公开。 必填项已用*标注