注意:题目是简析,所以只介绍常用的基本的配置项,其他的我还没有查清楚,明白以后会逐步更新。
查看利用angular-cli生成工程的配置文件angular-cli.json
只介绍其中的一部分
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": [],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
-
root
:指示angular工程的根目录,默认均为src文件夹
-
outDir
: 指示build之后输出的目录,一般均为dist
-
assets
: 指示工程的资源文件和文件夹,build之后会将其复制在dist
文件夹下面,一般用来存放图片,音乐等文件,上面的配置就是将assets
文件夹和一个图片作为资源存在 -
index
:指示工程唯一的入口.html
文件,就是在src
文件夹下面的index.html
-
main
:指示引导应用的main
文件,即src
文件夹下面的main.ts
-
polyfills
:指示工程应用的polyfills.ts
文件,在src
文件夹下面 -
tsconfig
:指示工程应用的tsconfig
文件 -
prefix
: 还没有查,默认即可 -
environments
: 这个指示配置各个环境的文件,如开发环境,生产环境等
下面两个才是我想介绍的很重要的文件 -
styles
: 这个数组指示全局的样式文件,配合中写的"styles.css"
就是在src中的文件,把.css
文件写在这个数组中,就可以应用到全局,比如想使用bootstrap.css
,就可以这样写:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"styles.css"
],
当然,实际上并不需要使用bootstrap,因为angular自己有自己的样式模块
- 类似于
styles
,scripts
也可以加入一些全局只用的模块,如jQuery
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
angular在build的时候会把这些文件统一打包。
这样,就不需要在index.html
中引入了
PS:有一些配置以我目前的水平和应用,暂时用不上,所以就没有深究,日后如有用到,会再次更新。