15、JavaScript与CSS打包工具全解析

JavaScript与CSS打包工具全解析

1. Yarn与依赖管理

在项目开发中，Yarn是管理依赖的重要工具。升级Yarn时， package.json 文件中的版本字符串不会改变，但 yarn.lock 文件会更新。反之，如果更新了 package.json 文件，还需要运行 yarn upgrade 来下载新版本。若要从应用程序中移除某个包，使用 yarn remove <package name> ，例如 yarn remove eslint 。

有了Yarn管理第三方依赖后，我们还需解决一些问题，如代码如何引用其他代码，以及如何将前端资源打包成可被浏览器处理的文件。这就涉及到了打包工具，如esbuild。

2. esbuild介绍

2.1 esbuild的优势

esbuild用Go语言编写，可编译成本地二进制文件，速度极快，官网称其速度是其他工具的10 - 100倍。在小型应用中，从webpack切换到esbuild后，构建过程从约五秒缩短到约半秒。而且，esbuild有强大的默认工具集，许多Rails项目无需进一步配置即可使用，Rails对esbuild的支持甚至不会创建配置文件。

2.2 安装esbuild

我们可以通过Rails安装程序指定esbuild作为jsbundling工具来安装它，安装后esbuild会被添加到 package.json 文件中