blocks|key|2794650|text|当它建成的时候，Angular2使用Webpack。此外，webpack将所有使用过的文件从node_modules文件夹打包到vendor.bundle.js中。我相信生成的Javascript的其余部分将被放入main.bundle.js中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2794651|node_modules文件夹实际上只是一个开发环境，将该文件夹推送到生产中是不明智的。|2794652|entityMap|0|LINK|mutability|MUTABLE|url|https://angular.io/guide/webpack|1|https://webpack.github.io/^0|1S|G|2Z|E|8|H|0|T|7|1|0|0|C|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@$9|W|A|X|1|Y]|$9|Z|A|10|1|11]]|E|$]]|$1|F|3|G|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]|P|$5|K|L|M|E|$N|Q]]]]

<a href="https://angular.io/guide/webpack" rel="nofollow noreferrer">Angular2 uses Webpack</a> when it's built. Additionally, <a href="https://webpack.github.io/" rel="nofollow noreferrer">webpack</a> bundles all of the used files from node_modules folder into the <code>vendor.bundle.js</code>. I believe the rest of the Javascript generated is put into the <code>main.bundle.js</code>.

The <code>node_modules</code> folder is really only intended to be a development environment and it's not wise to push that folder to production.

blocks|key|1463730|text|运行命令ng+build将将所有组件转换为一个js文件，并生成一个带有index.html的dist文件夹以及在生产环境中运行所需的所有其他配置。只需将该文件夹放置在您的网络主机。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1463731|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

running command ng build --prod will convert all your components into a single js file and it generates a dist folder with index.html and all other configurations required to run in production environment. Just place that folder in your web host.

blocks|key|2755519|text|如果后缀为--save，那么您拥有的所有节点模块以及将来可能安装的所有其他依赖项都将被添加到package.json文件中，并且该模块的依赖关系层次结构也会锁定在package-lock.json.You中，因此不必在存储库中存储所有庞大的节点模块，从而节省空间，您可以上传dist文件或通过命令npm+i在服务器上安装节点模块。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2755520|entityMap^0|5|6|1A|C|29|H|44|5|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|G|$]]

All the node modules you have and all other dependencies that you may install in the future if you suffix <code>--save</code> they'll get added to the <code>package.json</code> file and the dependencies hierarchy of that module also gets locked in <code>package-lock.json</code>.You don't have to store all the enormous node-modules on your repository hence saves space you can upload the dist file or just install the node-modules on the server by command <code>npm i</code>

blocks|key|1463828|text|版本控制|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1463829|您应该在您的node_modules文件中包含.gitignore，因此在您的版本控制中上传时会忽略它。|1463830|部署|1463831|只要package.json中包含所有依赖项，就可以在package.json中将npm+install作为构建脚本的一部分添加。它将安装所有必要的软件包，并将它们自动打包到您的构建中。|CODE|1463832|"scripts":+{
++"build":+"npm+install+&&+ng+build+--prod+--build-optimizer"
}|code-block|syntax|javascript|1463833|entityMap^0|0|4|0|0|0|2|0|15|B|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|10|8|@$9|11|A|12|B|L]]|D|@]|E|$]]|$1|M|3|N|5|O|7|13|8|@]|D|@]|E|$P|Q]]|$1|R|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|S|$]]

VERSION CONTROL

You should include node_modules in your .gitignore file, so it gets ignored from being uploaded in your version control.

DEPLOYMENT

As long as you have all the dependencies included in the package.json, you can add <code>npm install</code> as a part of the build script in package.json. It will install all necessary packages and package them in your builds automatically.

<pre><code>"scripts": {
 "build": "npm install &amp;&amp; ng build --prod --build-optimizer"
}
</code></pre>

blocks|key|1463843|text|Node_Modules永远不会直接包含在部署就绪代码中。Webpack是一个默认使用的构建工具，它将源文件和所需的node_module函数分别打包到main.bundle.js和vendor.bundle.js中。如果您想知道创建1的dist文件夹中每个文件由什么组成，请参考以下链接|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1463844|entityMap|0|LINK|mutability|MUTABLE|url|https://upgradetoangular.com/angular-news/the-angular-cli-is-a-great-way-to-build-your-angular-app-but-what-it-does-can-be-a-mystery-what-are-those-files-it-generates/^0|39|1|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Node_Modules are never be included directly in your deployment ready code. Webpack is a build tool used by default by Angular which bundles your source files and only the required node_module functions into main.bundle.js and vendor.bundle.js respectively. Refer the following link if you want to know what each file consists of in the dist folder created <a href="https://upgradetoangular.com/angular-news/the-angular-cli-is-a-great-way-to-build-your-angular-app-but-what-it-does-can-be-a-mystery-what-are-those-files-it-generates/" rel="nofollow noreferrer">1</a>

I am learning Angular 4 and plan to build an App this weekend.

<code>node_modules</code> is ginormous. 217 MB for a JavaScript Framework and over 700 subdirectories under node_modules!

Now, I did take a look at the HTML generated and it does not appear to reference <code>node_modules</code>. 

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

Question: can I not deploy node_modules? Will Angular 4 still function correctly?

Angular 4 node_modules

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我正在学习角4，并计划在这个周末构建一个应用程序。node_modules是单胞菌。217 MB的JavaScript框架和700多个子目录下的node_modules！现在，我看了一下生成的HTML，它似乎没有引用node_modules。<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>MyApp</ti

问角4 node_modules
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角4 node_modulesEN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角4 node_modules
EN