Angular项目的结构配置
首先
我平时工作中经常使用Angular。最近,我对设置文件进行的修改机会增多了。另外,虽然官方提供了关于工作空间和项目文件结构的页面,但在我的环境中有些许不同。我会把各个文件的作用总结成备忘录并记录下来。
环境
我使用以下环境进行了项目创建:
MacBookPro Monterey M1
npm版本:8.6.0
Angular CLI版本:13.3.1
Node版本:12.22.11
项目创建的设置
我创建了一个项目,并使用默认设置。
% ng new my-app
% Would you like to add Angular routing? (y/N) // N
% Which stylesheet format would you like to use? (Use arrow keys) // CSS
项目构成
我会确认所创建项目的结构。这次我会说明项目的根目录下的文件和文件夹。
% cd my-app
% ls -l
total 1592
-rw-r--r-- 1 user.name staff 1059 6 3 07:53 README.md
-rw-r--r-- 1 user.name staff 3039 6 3 07:53 angular.json
-rw-r--r-- 1 user.name staff 1423 6 3 07:53 karma.conf.js
drwxr-xr-x 601 user.name staff 19232 6 3 07:54 node_modules
-rw-r--r-- 1 user.name staff 784470 6 3 07:54 package-lock.json
-rw-r--r-- 1 user.name staff 1069 6 3 07:53 package.json
drwxr-xr-x 11 user.name staff 352 6 3 07:53 src
-rw-r--r-- 1 user.name staff 287 6 3 07:53 tsconfig.app.json
-rw-r--r-- 1 user.name staff 863 6 3 07:53 tsconfig.json
-rw-r--r-- 1 user.name staff 333 6 3 07:53 tsconfig.spec.json
请阅读我的说明文件。
以Markdown格式编写关于该项目的说明和启动方法的文件。
角度 . JSON
设置CLI的默认配置,以针对工作区内的所有项目。定义CLI使用的构建、服务和测试工具的配置选项。
karma.conf.js – karma配置.js
应用程序特定的Karma设置。Karma是一种用于生成用于显示测试代码执行结果的Web服务器的工具。在Angular中,它用于显示使用jamine编写的测试的覆盖率。
模块节点
通过npm命令安装的npm包所在的文件夹。
package-lock.json -> 包锁定文件 suǒ
由npm客户端自动生成的文件,其中包含已安装在node_modules目录下的所有包的版本信息。
基本上不需要手动修改。
包配置文件
在工作空间中,配置所有项目可用的npm包的依赖关系。有关具体的格式和文件内容,请参考npm文档。
可以在脚本中编写启动命令的缩写形式。
请帮我把以下内容用中文进行本地化,只需要一个选项:
src
包含应用程序源文件的文件夹。
tsconfig.app.json 的中文翻译可以是:应用程序 tsconfig.json。
包含TypeScript和Angular模板编译器选项的应用程序特定的TypeScript配置。
tsconfig.json文件
TypeScript的基本设置适用于工作区的项目。
tsconfig.spec.json的释义是什么?
用于应用测试的TypeScript配置。请参考TypeScript配置。
请参考
-
- Angular公式 ワークスペースとプロジェクトのファイル構造
- [Angular] Angular CLI で作成したプロジェクト構成をみる
最后
这次我描述了Angular项目的结构。将这些文件转化为文字后,我能更好地理解它们的功能。如果我能进一步详细地写下来,我会进行补充。