我想为Angular创建一个简单的hello world应用。
当我按照官方快速入门中的说明安装时,在我的项目中创建了32,000个文件。
我认为这是一个错误或我错过了一些东西,所以我决定使用angular-cli,但在设置项目后,我数了41,000个文件。
我哪里错了?我是不是忽略了一些非常非常明显的东西?
我想为Angular创建一个简单的hello world应用。
当我按照官方快速入门中的说明安装时,在我的项目中创建了32,000个文件。
我认为这是一个错误或我错过了一些东西,所以我决定使用angular-cli,但在设置项目后,我数了41,000个文件。
我哪里错了?我是不是忽略了一些非常非常明显的东西?
当前回答
如果您的文件系统支持符号链接,那么您至少可以将所有这些文件降级到一个隐藏文件夹中——这样像tree这样的智能工具在默认情况下就不会显示它们。
mv node_modules .blergyblerp && ln -s .blergyblerp node_modules
为此使用隐藏文件夹还可以鼓励这样的理解,即这些是与构建相关的中间文件,不需要保存到修订控制中——或者直接在部署中使用。
其他回答
没什么问题。这些都是您在package.json中提到的所有节点依赖项。
如果你已经下载了一些git hub项目,请小心,它可能有很多其他的依赖关系,而这些依赖关系实际上并不是angular 2 first hello world app所需要的:)
确保你有角度依赖 -rxjs 狼吞虎咽地吃 打印稿 -tslint 码头工人
你需要确保你只是从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(从2.0版开始)使用npm模块和依赖项进行开发。这就是你看到这么多文件的唯一原因。
Angular的基本设置包括编译器、类型依赖关系,这些仅用于开发目的。
一旦您完成了开发,您所需要做的就是捆绑这个应用程序。
在捆绑你的应用程序之后,只有一个bundle.js文件可以部署到你的服务器上。
'transpiler'只是一个编译器,感谢@omninonsense添加它。
您的开发配置没有问题。
您的生产配置有问题。
当你开发一个“Angular 2项目”或“任何基于JS的项目”时,你可以使用所有文件,可以尝试所有文件,可以导入所有文件。但如果你想为这个项目服务,你需要合并所有结构化文件,并摆脱无用的文件。
有很多选项可以将这些文件合并在一起:
YUI Compressor 闭包编译器 对于服务器端(我认为最好)GULP
如果您的文件系统支持符号链接,那么您至少可以将所有这些文件降级到一个隐藏文件夹中——这样像tree这样的智能工具在默认情况下就不会显示它们。
mv node_modules .blergyblerp && ln -s .blergyblerp node_modules
为此使用隐藏文件夹还可以鼓励这样的理解,即这些是与构建相关的中间文件,不需要保存到修订控制中——或者直接在部署中使用。