使用 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 Webpack 打造库

前端工具的逻辑

Photo by Jeffrey Lee on Unsplash

前端程序开发中会接触到多种多样的工具,让人眼花缭乱。有人甚至做了网站来罗列常用的前端工具。这两天本人梳理了一下常用的前端工具,按功能不同,将它们分为代码转译、代码构建工具、代码风格统一、代码提示与单元测试工具五大类。

继续阅读前端工具的逻辑