簡體   English   中英

角4個node_modules

[英]Angular 4 node_modules

我正在學習Angular 4,並計划在本周末構建一個App。

node_modules是巨大的。 217 MB(用於JavaScript框架)和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仍然可以正常運行嗎?

Angular2在構建時使用Webpack 此外, webpack將node_modules文件夾中的所有已使用文件捆綁到vendor.bundle.js 我相信生成的Javascript的其余部分都放在main.bundle.js

實際上, node_modules文件夾僅旨在用作開發環境,將該文件夾推入生產環境並不明智。

運行命令ng build --prod會將所有組件轉換為一個js文件,並生成一個帶有index.html以及在生產環境中運行所需的所有其他配置的dist文件夾。 只需將該文件夾放在您的虛擬主機中即可。

所有你有節點模塊以及您可能在將來,如果你安裝后綴所有其他依賴--save他們將被添加到package.json文件和模塊的依賴性層次也被鎖定在package-lock.json您不必在存儲庫中存儲所有巨大的節點模塊,從而節省了空間,您可以上傳dist文件,或者只需通過命令npm i將節點模塊安裝在服務器上

版本控制

您應該在.gitignore文件中包括node_modules,以便將其從版本控件中上傳時被忽略。

部署

只要您在package.json中包含所有依賴項,就可以在package.json中將npm install添加為構建腳本的一部分。 它將安裝所有必需的軟件包並將其自動打包到您的構建中。

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

Node_Modules永遠不會直接包含在部署就緒代碼中。 Webpack是Angular默認使用的構建工具,它將源文件和所需的node_module函數分別捆綁到main.bundle.js和vendor.bundle.js中。 如果您想知道每個文件在dist文件夾中包含什么,請參考以下鏈接1

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM