Gulp / NPM Dev依赖项 - 我的网站完成后如何处理它们？

Posted 2021-04-20

我已经开始学习Gulp和Webpack了，其中一个教程没有涉及到......当你的项目完成并准备好部署时 - 你对所有dev依赖项做了什么？

node_modules文件夹本身很大，我假设你没有把它上传到你的web服务器（或者你可能这样做）？但这是否意味着您使用SASS / minification之类的所有好处只能在您的localhost项目中获得，因此它只是部署完成的文件（这意味着必须在网站上编辑缩小的代码等）如果你需要做任何小改动）。

学习过程的这一部分比在Web开发中迄今为止我所经历的任何其他信息更难找到信息。我也认为它很差，没有一个主要的学习库（Lynda，Treehouse等）在教程结尾处覆盖了这一点。就像，祝贺你现在建立了一个你可以上传的网站。好的，但我如何处理所有依赖项中的数百个文件等？我是否正常上传它们作为网站的一部分，如果没有，我该如何防止这种情况或npm是否自动阻止这种情况？

任何指导/解释都会很棒。

艾米莉

答案

部署项目有许多不同的方法。它所基于的技术，团队规模，项目规模，项目重要性和许多其他因素是决定如何完成的重要因素。我无法深入研究它在大项目中是如何完成的，因为这本身就是一个完整的领域，但我可以给你一些关于如何开始的指示。

部署代码时，通常可以选择四种策略：

1. 在部署期间在服务器上构建。
2. 在部署和部署node_modules和生产文件之前构建。
3. 在部署之前构建并仅部署生产文件。
4. 使用容器部署。

Build on the server

使用此策略，您可以将存储库中的所有内容上载到服务器。存储库我指的是您的源代码仓库，而不是整个项目文件夹。忽略的文件和文件夹（在.gitignore中，如果您正在使用git）不会上传，这意味着您不上传node_modules或gulp build文件。我假设您没有使用版本控制跟踪这些文件和文件夹。上传文件后，在服务器上运行npm install --only = production和gulp。

在启用生产模式的情况下运行npm install时，它仅下载并安装依赖项。 devDependencies被跳过。您可能想知道如何在不安装的情况下运行gulp。那么，你必须将所有与gulp相关的模块移动到依赖项部分。您在gulpfile中使用的模块也是如此，例如babel和webpack。

该应用程序应设置为提供由gulp制作的文件。如果您正在使用Express并且gulp make文件位于名为dist的文件夹中，则它看起来像这样：

app.use(express.static(path.join(__dirname, 'dist')));

当您使用AWS Elastic Beanstalk或Heroku等托管云提供程序时，此构建过程通常会自动生成。例如，要部署到Heroku，可以将repo中的分支推送到Heroku上的远程存储库。然后Heroku将自动运行npm install，然后运行您在package.json中定义的postinstall脚本。如果您将postinstall脚本设置为以下内容：

"scripts": {
  "start": "node app.js",
  "postinstall": "gulp"
}

当您推动更改时，它会自动为您运行gulp。然后，工作流程包括在本地进行更改，提交代码并将更改推送到Heroku。 Heroku将处理npm和gulp的东西。它还将在构建完成后重新启动应用程序。 Elastic Beanstalk与此类似。

我会推荐这个策略。它适用于持续集成。 AWS和Heroku也有免费的层级，因此您可以根据需要在那里进行实验。

Build before deploying and upload both node_modules and production files

您还可以选择在部署之前构建所有内容。上面提到的构建过程有两个步骤：在服务器上运行npm install以创建node_modules，然后在服务器上运行gulp以创建生产文件。

对于这个策略你

1. 在工作文件夹（本地）内运行gulp以创建生产文件。
2. 将生产文件以及package.json复制到新文件夹中。
3. 在新文件夹中运行npm install --only = production以创建node_modules。
4. 确保应用程序在新文件夹中工作，然后将其上载到服务器。

在这种情况下，您不在服务器上运行npm install或gulp。相反，您提供了所需的所有文件。我不认为我曾经见过这样做过。它与我提到的托管服务提供商不兼容，因为他们想自己运行npm install。

Build before deploying and upload only production files

如上面的策略所述，在部署期间未在服务器上运行npm install并不常见。但是，跳过gulp-on-server步骤是很常见的。不要将所有gulp模块都放在依赖项中，而是将它们保存在devDependencies中。你现在：

1. 在本地运行gulp以创建生产文件。
2. 将生产文件以及package.json复制到新文件夹中。
3. 将新文件夹上载到服务器。
4. 确保在服务器上运行npm install --only = production。

例如，使用Elastic Beanstalk非常容易。您所要做的就是上传一个包含生产文件和package.json的zip文件，它将在上传完成后自动为您运行npm install。它还将在安装完成后启动应用程序。

Using containers

此策略使用Docker等技术创建一个容器，其中包含运行Node所需的所有内容。这意味着OS，Node，npm，您的代码等。然后，您将容器上传到接受容器的托管解决方案，例如AWS。这不是很难，但我会建议你先习惯“普通”的部署方法。

---

您提到对服务器上的代码进行小的更改。我建议你不要这样做。您应该在本地编辑代码，然后确保它在本地服务器上运行，最后在提交后上载更改。您的回购应该反映实时代码。

最后，我建议您在Heroku或AWS或两者上创建帐户。只是搞乱它，看看它是如何工作的，这通常是最好的学习方式。它是免费的，你不能破坏任何东西。