通过餐厅厨房烹饪来讲解基本的 JavaScript 开发工具

如果你能设身处地地站在餐厅厨师的角度思考问题，那么你就能理解像 NPM、Webpack 和 Babel 这样的常用工具是如何协同工作的。

说实话，虽然我花了18个月的时间自学了前端和后端Web开发，但我从未真正理解我在开发环境中使用的各种工具。

Grunt？Gulp？NPM？Yarn？Babel？TypeScript？Webpack？Stylus？我通常会直接在网上看一篇博客，然后完全照搬他们的开发环境。

经过几个小时的努力，我终于把所有部件组装好了，然后我就会尽量避免碰那玩意儿，以免把它弄坏。

可想而知……这使得添加任何新技术都变得非常困难！

我想了解所有不同的组件，例如包管理器、模块打包器、转译器和任务运行器。如果你听说过这些词，但不太明白它们的含义，那么这篇指南正适合你！

事情是这样的——我将展示所有这些工具是如何协同工作的，就像主厨确保食物能正确送到餐厅的每一张餐桌上一样。

要理解这一点，你只需要过去去过几家餐厅。不需要任何厨师经验🙂。而且，你可能还需要有一些使用 NPM 和 Webpack 这类工具的经验。这样，你就能理解让它们协同工作所面临的挑战。

餐厅-开发者环境类比的基本原理

我们先来思考一下餐厅的两个组成部分。

厨房想要做出美味的食物，顾客也想要享用美味的食物。然而，双方处理食物相关信息的方式存在显著差异。厨房必须具备更复杂的理解能力才能快速制作各种菜肴，并且必须准备好运行多个流程来实现这一目标。

顾客只需具备有限的理解能力。每位顾客只需对菜单有足够的了解，能够点到自己喜欢的菜肴即可。作为厨师，你根本无法得知顾客对食物的了解程度。你基本上只能保证他们识字。除此之外，你对此几乎无能为力。

同样，服务器和浏览器能够处理的信息也存在差异。服务器端可以使用多种语言和框架，具体取决于您的配置方式。您可能已经习惯了 Node.js，它是一个 JavaScript 运行时环境，您可以对其拥有相当大的控制权。

但是，你对浏览器内部的运行机制几乎没有控制权。记住，像谷歌、Mozilla 和微软这样的公司必须让他们的浏览器能够在所有类型的计算机上运行，​​并遵循（某种程度上）一致的协议。而且，他们的旧版本浏览器（比如 IE9）在未来几年内仍将继续存在。这些旧版本只能运行 HTML、CSS 和 JavaScript。你对浏览器这方面的控制权非常有限，而且你必须遵守他们的标准。

那么，让我们一起来了解一下典型开发环境中的各个工具吧！

了解包管理器 (NPM)

好的，既然你是主厨，你的职责就是确保每周七晚都能稳定地提供美味佳肴。高峰时段厨房已经够忙乱了，所以你需要尽可能地提高厨房的运转效率。

假设你需要储存大约 60 种不同类型的食物才能做出你所有的饭菜：蔬菜、肉类、配菜等等。

（好吧，我希望您的餐厅尽可能使用新鲜食材而不是罐头食材，但请容我先说几句。）

想象一下，你需要亲自追踪所有这些食材，并确保有足够的量来支撑一整晚的烹饪。这简直是噩梦！你会不断地发现食材不够用，然后手忙脚乱地寻找解决办法。

相反，你希望厨房在每天晚上开始时都能自动备齐所有食材。你需要一名员工来监控这一点，确保食材种类齐全，这样你就无需临时抱佛脚。

你可能会说：“代码永远不会‘耗尽’，那么包管理器怎么可能与此类似呢？”

这就是没有软件包管理器的生活会是什么样子。

1. 下载每个单独的软件包，并将其添加到您的/node-modules/文件夹中。
2. 给团队里的每个人发邮件，以便他们也能下载该文件。
3. 希望并祈祷，随着时间的流逝，所有新方案都能完美契合。

随着你不断向技术栈中添加新的工具，这种方法很快就会变得难以维护。

React、Webpack、Babel 和 Stylus 是三种常用的技术，它们都在不断更新。你可以尝试通过将新版本拖放到文件系统中来保持这三者的最新版本同步。或者，你可以使用像NPM这样的包管理器 来自动完成这项工作，这样你和你的团队成员就无需手动拖放包含代码的新文件夹，也不用担心新包之间不兼容的问题。

这就像一份厨房必备食材的清单。您的员工会随时备好清单，如果您需要更换食材，所有员工都会立即知晓。

以下package.json示例取自Peter Jang 的《现代 JavaScript 指南》。package.json可靠地记录了服务器端代码中涉及的所有工具。

dependencies属性跟踪生产环境中涉及的所有软件包。

您可以使用命令行中的npm install 命令， 这样就无需不断地复制和粘贴文件夹。

了解模块打包器（Webpack）

目前为止，你的食材准备就绪。但是，你却无法将你的开胃菜、主菜和甜点信息传达给顾客！你只有菜谱、手写笔记以及厨师与厨房沟通的其他方式。

想象一下，如果你的服务员给顾客发一叠菜谱，让顾客自己去猜每道菜的配料，你的餐厅会是什么样？

显然，你需要的是菜单。菜单以简洁明了的方式呈现食物信息，方便顾客理解。记住，浏览器只能理解 HTML、CSS 和原生 JavaScript。所以，你不能指望给它提供 React 等框架的 JSX 文件，然后指望它能正常运行。

您的浏览器无法访问后端文件，因为它无法识别这些文件！即使您将文件路径链接到前端使用的文件，浏览器也无法识别。

这时模块打包器就派上用场了。顾名思义，“打包器”这类工具会将所有服务器端编写的、用于前端的代码聚合起来。模块打包器会将这些代码编译成一个大型的、纯净的 JavaScript 文件，供前端使用！这就像菜单一样——提供一份清晰易懂、内容全面的菜谱摘要。

以下是一个基本示例，同样来自 Peter Jang，并使用了Moment.js 包。

这是后端示例文件。

如您所见，这里有一个 require 语句，它并非标准的 JavaScript 代码。因此，您需要一个模块打包工具，使其能够被前端理解。

运行 `npm install webpack` 后，以下是配置文件的基本版本。

入口文件描述了需要编译哪些文件。这就像我们比喻中的菜谱。而输出文件名就是结果所在的位置——也就是菜单！

然后你就可以在 HTML 中访问该文件，并且该代码可以在浏览器中运行。

以下是它的可视化呈现。

请注意，上面的示例仅使用了 moment！如果您要打包 5 种不同的工具，预计每种文件类型都会更加复杂，属性也会更多。

了解转译器（触控笔）

随着你对 CSS 和 JavaScript 的理解不断加深，你会发现默认语法缺少一些关键特性，而这些特性会让你的工作轻松许多。例如，如果有一些快捷方式，很多 CSS 代码的编写都会更加便捷。

例如，Stylus是 CSS 的一个流行替代方案，它能让创建样式规则的繁琐工作变得轻松许多。以下是一个代码片段。

但是，我们都知道，浏览器无法直接读取 .styl 文件中的 Stylus 代码。因此，在打包模块时，我们需要将 Stylus 文件转译成 CSS。

这个工具感觉像是模块打包器的扩展，因为它们的总体目标相同：使服务器端编写的代码能够在浏览器中使用。不过，它可能更适合高级用户，因为你需要先使用 Stylus、Babel 或 TypeScript，才需要用到转译。然而，几乎所有使用 React 的人都需要用到模块打包器。

所以，考虑到这一点，我认为菜单设计者可以扮演餐厅菜单设计师的角色。你完全可以让厨师或经理，凭借他们有限的平面设计技能（虽然不太可能），用微软画图之类的软件来制作菜单。虽然这可能对餐厅的品牌形象不太有利，但菜单本身还是可以理解的。

或者，您可以聘请专业的菜单设计师，让您的菜单看起来更专业。这并非必须，但可以让您的菜单设计更加完善，而不仅仅局限于微软 Word 中的模板。

以下是代码。我们将使用webpack 的stylus-loader包。首先，请安装它。

npm install stylus-loader stylus --save-dev

然后，您可以根据 webpack.config 文件的其他部分，通过多种方式进行设置。以下是一个示例。

了解任务运行器（NPM Scripts 或 Grunt）

我们的开发环境中还有一个问题尚未解决。要执行上述任何命令，您仍然需要在命令提示符中手动输入命令才能运行代码。这实在是不具备可扩展性！

想象一下，如果你正在编辑一个 React 文件，每次想要重新加载本地服务器时，都需要在命令行中输入命令。那简直太麻烦了。

如果你是厨师，这意味着所有的服务员和清洁工都会在厨房里等着你点餐。你的餐厅效率会非常低下。

想象一下，如果每个服务员都在忙着处理这样的订单：

“清理3号桌”

“给2号桌送水”

“请1号桌的客人点餐”

相反，你希望服务员拥有固定的工作流程。他们应该能够在几乎不需要他人反馈的情况下，掌握自己负责的餐桌情况。

在代码中，这就是为什么你需要一个任务运行器。你需要自动化一些经常重复使用的任务，这样就无需频繁打开命令提示符。

实际上，你可以直接在package.json文件中使用 NPM 来实现这一点。我们再来看看 webpack。你肯定不希望每次修改 React 或 Stylus 文件时都运行 webpack。你希望在webpack 监视的文件发生更改时，自动重新运行该任务。

您可以使用package.json中的 scripts 部分来实现这一点。

"scripts": { 
  "watch": "webpack --watch"
},

然后，您只需在命令提示符中输入一次 watch 命令，webpack 就会在您每次更改指定文件夹中的文件时运行。

$ npm run watch

接下来会发生什么？

你喜欢这篇教程吗？请在评论区告诉我，或者看看我其他关于常见网页开发难题的讲解！