使用 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 进行指定。

(完)

发表评论

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