Question

我正在学习Angular 4并计划在本周末建立一个应用程序。

node_modules是巨大的。对于JavaScript框架为217 MB，在node_modules下有超过700个子目录！

现在，我确实看了一下生成的HTML，但它似乎没有引用node_modules。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
  <script type="text/javascript" src="inline.bundle.js"></script>
  <script type="text/javascript" src="polyfills.bundle.js"></script>
  <script type="text/javascript" src="styles.bundle.js"></script>
  <script type="text/javascript" src="vendor.bundle.js"></script>
  <script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>

问题：我不能部署node_modules吗？ Angular 4还能正常运作吗？

Answer 1

Angular2 uses Webpack当它建成时。此外，webpack将node_modules文件夹中的所有已使用文件捆绑到vendor.bundle.js。我相信生成的其他Javascript都会放入main.bundle.js。

node_modules文件夹实际上只是一个开发环境，将该文件夹推送到生产环境并不明智。

Answer 2

运行命令ng build --prod会将所有组件转换为单个js文件，并生成带有index.html的dist文件夹以及在生产环境中运行所需的所有其他配置。只需将该文件夹放在您的网络主机中即可。

Answer 3

您拥有的所有节点模块以及将来可能安装的所有其他依赖项（如果后缀--save它们将被添加到package.json文件并且该模块的依赖关系层次结构也会获得锁定在package-lock.json。您不必将所有庞大的节点模块存储在存储库中，因此节省了可以上传dist文件的空间，或者只需通过命令npm i在服务器上安装节点模块

Answer 4

版本控制

您应该在.gitignore文件中包含node_modules，因此在版本控制中上传时会忽略它。

<强>部署

只要您拥有package.json中包含的所有依赖项，就可以在package.json中添加npm install作为构建脚本的一部分。它将安装所有必需的软件包并自动将它们打包到您的构建中。

"scripts": {
  "build": "npm install && ng build --prod --build-optimizer"
}

Answer 5

Node_Modules永远不会直接包含在部署就绪代码中。 Webpack是Angular默认使用的构建工具，它将源文件和所需的node_module函数分别捆绑到main.bundle.js和vendor.bundle.js中。如果您想知道在创建的1

的dist文件夹中每个文件包含的内容，请参考以下链接。

Angular 4 node_modules

5 个答案: