作为一个后端工程师,为了应对层出不从的需求变化,以及为了方便自己,我写过几个简单的前端页面来简化自己的工作流。由于是工作需求,又不是自己的本行,写这些都是糙快猛搞定,没有深究各种概念和框架。Vue, React 和 Angular 都用了个遍,但都是浅尝辄止。之前创建各种项目都是使用了框架提供的命令行工具,比如 vue-cli。这些工具生成的文件都不敢改。最近想做一个业余项目,正好借此机会打牢前端基础。今天这篇文章记录一下前端使用的各种编译/打包工具,之后要是忘了就可以再温习一下。

Babel

Babel 是一个 JS 的编译器,它将现代的 JS 代码编译成浏览器兼容的 JS 代码。和其他的编译器类似,它包含了以下三个阶段:

  1. Parsing
  2. Transforming
  3. Printing

Babel 本身在 transforming 阶段什么也不做,也就是说,它是一个 identity function。开发者可以通过配置 plugin来增强它。而 preset就是一个预定义的 plugin集合。

简单来说,Babel 就是一个让人可以随意使用 JS 新 feature 而不用担心浏览器不支持的编译器。

Webpack

Webpack 是一个静态的打包器,它将你项目中所有的模块打包成一个或多个 bundle。你点击前面的链接就可以看到官方给出的定义,不严谨的来说,就是各种可以被 import/require 的内容。Webpack 可以通过使用 loader 来是用各种语言实现,或者各种预处理器生成的模块。

简单来说,Webpack 就是一个让人可以用最舒服的方式模块化代码的工具。它帮你将所有的模块按依赖打包方便浏览器运行。

总结

没啥好总结的,这里有一个例子,供大家参考。