现代前端应用框架（如 Next.js、Nuxt.js 等）都直接集成了完整的工具链，按照官方文档做，一行命令就可以配置完毕。这整套工具在我们调试和构建项目时，在背后做了大量工作。虽然这有助于快速上手，但是非常不利于我们了解其中的原理。 然而，各种工具纷繁复杂，文档浩如烟海。由于工具之多，即使文档再友好、工具本身再易用，也很难快速入门。 本文将带你踏上一段旅程，从一个空文件夹开始，一步一步添加工具，最终配置一套完整的前端工具链。在其中，我们可以对各个工具的概念、用途和原理有一个比较系统的认识。每个部分都列出了相关文档的链接，方便查阅。 我们使用 React.js 前端框架，使用 Tailwind 编写 CSS，使用 TypeScript 编写脚本，并使用 ESLint 进行代码检查。最终，希望达到和使用 create-react-app 工具创建的项目类似的开发体验。 TL；DR 配置完毕后，整套工具链的示意图如下： 从创建一个 npm 项目开始 创建一个空目录（一般目录名就是项目名），进入其中执行 npm init，这个命令会交互式地让你填写该项目的元信息。 我们将这个项目命名为 study-chain（意为 study frontend toolchain）： mkdir study-chain cd study-chain npm init 确认信息之后，目录下会生成 package.json 文件，记录了项目的元信息： // package.json { "name": "study-chain", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exi...