我想为Angular创建一个简单的hello world应用。
当我按照官方快速入门中的说明安装时,在我的项目中创建了32,000个文件。
我认为这是一个错误或我错过了一些东西,所以我决定使用angular-cli,但在设置项目后,我数了41,000个文件。
我哪里错了?我是不是忽略了一些非常非常明显的东西?
我想为Angular创建一个简单的hello world应用。
当我按照官方快速入门中的说明安装时,在我的项目中创建了32,000个文件。
我认为这是一个错误或我错过了一些东西,所以我决定使用angular-cli,但在设置项目后,我数了41,000个文件。
我哪里错了?我是不是忽略了一些非常非常明显的东西?
当前回答
你需要确保你只是从Angular CLI生成的项目中部署dist (distributable的缩写)文件夹。这允许该工具获取您的源代码及其依赖项,并只提供运行应用程序所需的内容。
也就是说,Angular CLI在通过' ng build——prod进行产品构建时存在/曾经存在一个问题
昨天(2016年8月2日)发布了一个版本,将构建机制从broccoli + systemjs切换到webpack,成功地处理了产品构建。
基于这些步骤:
ng new test-project
ng build --prod
我看到在这里列出的14个文件的dist文件夹大小为1.1 MB:
./app/index.js
./app/size-check.component.css
./app/size-check.component.html
./favicon.ico
./index.html
./main.js
./system-config.js
./tsconfig.json
./vendor/es6-shim/es6-shim.js
./vendor/reflect-metadata/Reflect.js
./vendor/systemjs/dist/system.src.js
./vendor/zone.js/dist/zone.js
注意:目前要安装webpack版本的angular cli,你必须运行…NPM安装angular-cli@webpack -g
其他回答
Angular本身有很多依赖项,而CLI的beta版本下载的文件是其他版本的四倍。
这是如何创建一个简单的项目将更少的文件(“只有”10K文件) https://yakovfain.com/2016/05/06/starting-an-angular-2-rc-1-project/
您的开发配置没有问题。
如果你使用Angular CLI,你可以在创建项目时使用——minimal标志
ng new name --minimal
Typical Angular2 Project
NPM包 文件(开发 ) 现实世界中文件(部署)
@angular 3,236 1
rxJS 1,349 1*
core-js 1,341 2
typings 1,488 0
gulp 1,218 0
gulp-typescript 1,243 0
lite-server 5,654 0
systemjs-builder 6,470 0
__________________________________________________________________
Total 21,999 3
*:与@angular捆绑
[参见此捆绑过程⇗]
如果你使用Angular CLI,你可以在创建项目时使用——minimal标志
ng new name --minimal
我刚刚用标志运行它,它创建了24 600个文件和ng build -prod生成212 KB的dist文件夹
所以如果你的项目中不需要饮水机或者只是想快速测试一些东西,我认为这是非常有用的
你需要确保你只是从Angular CLI生成的项目中部署dist (distributable的缩写)文件夹。这允许该工具获取您的源代码及其依赖项,并只提供运行应用程序所需的内容。
也就是说,Angular CLI在通过' ng build——prod进行产品构建时存在/曾经存在一个问题
昨天(2016年8月2日)发布了一个版本,将构建机制从broccoli + systemjs切换到webpack,成功地处理了产品构建。
基于这些步骤:
ng new test-project
ng build --prod
我看到在这里列出的14个文件的dist文件夹大小为1.1 MB:
./app/index.js
./app/size-check.component.css
./app/size-check.component.html
./favicon.ico
./index.html
./main.js
./system-config.js
./tsconfig.json
./vendor/es6-shim/es6-shim.js
./vendor/reflect-metadata/Reflect.js
./vendor/systemjs/dist/system.src.js
./vendor/zone.js/dist/zone.js
注意:目前要安装webpack版本的angular cli,你必须运行…NPM安装angular-cli@webpack -g