npm构建脚本_第1部分：使用NPM脚本构建项目启动器

当涉及到构建一个简单的前端项目时，如何开始？ 您需要什么工具？ 我怀疑每个人都会有不同的答案。 您是从（JS或CSS）框架开始，还是从现成的样板开始？ 也许您使用任务运行程序（例如Gulp来协调项目的需求。还是只从HTML和CSS文件开始简单？

前端工具的前景可能会令人困惑，有时甚至不知所措–当您要花时间学习HTML，CSS和Javascript时，感觉还需要花费一些时间来学习。 在本系列文章中，我想帮助开发人员了解一些构建Web项目已变得司空见惯的工具和方法。 在接下来的三篇文章中，我们将一起构建一个简单的项目启动器（或样​​板）。 我们将介绍：

1. 介绍使用NPM脚本（本文）来编译Sass，运行服务器和实时重新加载。
2. 使用最小配置的应用程序捆绑程序Parcel启动并运行。
3. 建立可重用的Sass架构

随意跳过您已经熟悉的部分。

为什么我们需要一个项目入门资料库？

我之前在此博客上曾写过有关使事情简单和构建无依赖关系的文章-对于一个基本的，最小的站点，此方法值得推荐。 但是我的绝大多数项目都会受益于更多的工具。 在任何给定的项目中，至少我可能想要：

• 运行本地服务器
• 将SCSS编译为CSS，并缩小输出
• 实时重新加载（无需手动刷新即可在浏览器中显示更改）
• 优化图像
• 创建SVG图标精灵

在较大的项目中，我们可以将更多工具选项添加到组合中，以帮助我们构建高性能，可访问的网站。 我们可能需要模块捆绑，代码拆分和转译。 在CSS方面，也许我们想内嵌关键CSS，或清除未使用的选择器。

如果您不知道其中一些单词的含义，那么您并不孤单！ 近年来，前端开发变得更加复杂，因此很难跟上最佳实践的不断变化。 确实帮助我了解了当今进入前端开发领域的广阔工具环境的文章是《 恐龙的现代Java解释》 。 尽管已有两年的历史了，但本文仍然非常相关，并且简洁地解释了Javascript如何发展成为我们工作流程中如此重要的组成部分。

所有这一切都需要花费时间来设置和配置，并且每次我们开始一个新项目时都要从头开始做都是不理想的。 这就是为什么拥有一个我们可以克隆或下载的入门资料库非常有用的原因，其中包括我们立即开始进行编码所需的一切。

选择我们的工具

我不是一个喜欢花时间建立复杂工具的人。 我希望我的工具需要尽可能少的时间，以便我可以专注于自己喜欢做的​​事情！ 虽然我过去曾经使用过Gulp，但现在似乎在工具链中没有那么必要了：几乎所有依赖项都可以通过NPM安装，并且使用NPM脚本配置它们并不比使用Gulp配置它们困难。 因此，使用任务运行器似乎有点多余，只会给项目增加额外的依赖性。

我在这里选择的工具是个人喜好的，并且适合我喜欢构建的项目类型。 它们不一定是每个人的选择，并且有很多不同的方法可以做事情。 但是我希望本教程可以帮助您更加熟悉一些在开发人员中流行的工具，以便您可以自己选择。

考虑到这一点，让我们开始构建项目启动器，并了解我们将在此过程中使用的工具。 随意跳过您已经熟悉的任何部分。

安装Node.js

我们需要做的就是我们的项目设置与NPM脚本工作的第一件事情就是要确保我们的Node.js全球的装机量。 这听起来很简单，但是当我们意识到有很多不同的方法可以做到这一点时，事情已经变得有些复杂了：

• 从网站下载最新版本，并按照说明进行安装
• 使用Mac上的Homebrew之类的软件包管理器，该软件包管理器允许我们使用一个简单的命令来更新节点版本： brew upgrade node 。
• 使用NVM（节点版本管理器） 。

NVM是我的首选，因为它使我们能够轻松升级节点版本，查看当前正在运行的版本，列出其他已安装的版本或使用单个命令切换到另一个版本。 但是，根据您的设置，它需要其他步骤来安装，这不在本文的讨论范围之内。

一旦安装了Node（通过任何适合您的方法），就可以通过运行node -v来检查当前安装的版本。 （您可能需要升级到最新版本。）如果使用的是NVM，则可以（可选）创建.nvmrc配置文件，以确保始终为项目运行正确的Node版本。

提示：检查您的节点版本

如果您在尝试运行项目时遇到错误，那么最好检查一下您运行的Node版本是否正确。 如有疑问，您始终可以删除node_modules文件夹，安装最新版本的Node，然后再次运行npm install 。

NPM

安装节点还会安装NPM （节点程序包管理器）。 这基本上是一个庞大的开放源代码Javascript开发工具（或程序包）库，任何人都可以将其发布。 我们可以直接访问此工具库，并且（无论好坏！）都可以在我们的项目中安装其中的任何工具。

NPM还是纱？

Yarn是替代软件包管理器，与NPM类似，并且非常流行。 实际上，许多人认为它是一种改进。 可以类似的方式使用它来安装依赖项。 如果您希望在NPM上使用Yarn，则可以在本文中使用的任何位置安全地用等效的Yarn替换NPM命令。

请注意，无论我们使用的是Yarn还是NPM，它仍然是我们正在安装的NPM软件包– Yarn只是CLI工具，没有竞争对手的Yarn软件包库。 关于Javascript生态系统的众多令人困惑的事情之一！

初始化项目

首先，让我们创建