脚本宝典收集整理的这篇文章主要介绍了介绍Angular 工程化,构建对象,编译器,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
这篇文章从宏观的角度认识Angular 的工程(PRoject),构建对象(build target),编译器(compiler)。包括如下内容
一般而言,Angular的工作目录结构如下:
@H_512_17@my-app |---- tsconfig.json Angular.json package.json projects |----- project1 project2 src |----- xxxx
特指angular.json文件。下面看看这个工程文件的主要几个部分。先列出其中使用的gIThub 链接。
$schema
字段指定的值。用来描述Angular 工作空间的多项目的结构。其实就是当前angular.JSON 的约束。简单样例如下。
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",//schema
"version": 1, // 你的程序的版本
"newProjectRoot": "projects", // 表示如果使用ng new 创建一个新的project,它的根目录在Projects下面,可以任意指定
"projects":{
"project1":{}, // 第一个project
"project2":{} // 第二个project
},
"defaultProject":"project1", // 默认是那个project
"schematics":{}, // configSchema, 链接如上,控制组件风格的。
"cli":{"Analytics": false} // 这个可以忽略,例如这个选项就是决定是否跟Angular Team 分析你项目的使用分析。
}
还是看下面的这个简单的例子,下面的配置是上面配置中project1的值。 先列出其中用到的一些链接
{
"root":"xxx", // 表示这个project 的根目录。
"sourcrRoot":"xxx/xxx", // 这个表示这个project 的src 的目录。注意跟上面的区分, src 里面放置了main.ts app.module 等。
"projectType":"application",// 项目的类型,application library 等。
"prefix":"",// 组件selector 的前缀。
"schematics":{}, // 与上一节中的configSchema 一样。控制组件风格的。
"Architect":{}, // 这个是核心,会定义这个工程有哪些编译模式。下节细谈.
}
architect里面定义了各种各样的构建对象(build target),那么什么是build target 呢?最直接的认识,ng build
,ng serve
,这两个命令里面的build,serve就是构建对象。我们可以把它们理解成环境变量+构建工具的组合。
首先,Angular 保留了这些构建对象
{
"architect": {
"build": {},
"serve": {},
"e2e" : {},
"test": {},
"lint": {},
"extract-i18n": {},
"server": {},
"app-shell": {},
"mybuildTarget":{}, // 这个是自定义的构建对象,任意名字。
}
}
我们也可以自己定义任意名字的构建对象,然后我们可以在package.json 中这么使用它 ng run mybuildTarget
(这个我没有实验过),不过大部分情况下,我们只会用保留build Target。那么每一个build Target 拥有三个重要的字段 builder,options,configurations
builder 这个里面是清单,给两个例子
options 描述与对象的project 工程相关的属性,例如下面的例子
{
"options":{// 配置选项
"outputPath":'dist/xxx',
"index":'xxx/src/index.htML',
"main":"xxx/src/main.ts",
"polyfills":'xxx/src/polyfill.ts',
"tsConfig":'xxx/src/tsconfig.app.json',
"assets":[assetPath1,assetPath2,...], // {"glob":xxx,"input":xxx,"output":xxx},需要复制到dist目录的assets
"styles":[stylePath1,stylePath2,...],// {"glob":xxx,"input":xxx,"output":xxx},需要添加到index.html的样式文件,
"scripts":[script1,script2,xxx],// 需要添加到index.html的js 文件。
}
}
{
"configurations":{ // 典型的用法是 `ng build -c=production/development/qa/uat`
"production":{}, // 生成环境的编译配置
"development":{}, // 本地开发环境的配置
"qa":{}, // 测试环境的配置
"uat":{}, // uat测试环境的配置
"demo":{
"fileReplacements":[
{"replace":'xxx/environment.ts','with':'xxx/environment.prod.ts'} // 编译前替换文件
],
//options 里面大部分的配置,这个地方都可以替换。
}
}
}
ng run buildTarget -c=configurationName
或者99%的使用场景是ng build -c=configurationName
使用configurationName来编译build 编译对象,也就是编译应用。ng serve -c=configurationName
使用configurationName来编译serve 编译对象,也就是本地开发环境。Create Programe(TS) ---> Analysis(Angular) ---> Resolve(Angular) ---> Type Checking(TS) ---> Emit (TS) TS: TSC中的步骤
首先使用这个模式的好处与原因
Angular 提供了两者编译器 JIT(Just In Time) vs AOT(Ahead Of Time)
JIT: 在浏览器中的runtime中编译你的应用。Angular8 之前默认的编译器, 也叫ViewEngine
AOT: 在编译打包阶段编译应用, Angular9 开始的默认编译器,也叫IVY。
Angular.json中的aot:true
可以控制编译器的选择。
AOT 友好的代码
code Analysis (AOT collector)
code generation/Resolve
Template type checking 它是通过typescript 来实现模板里面的语法类型检测的。
以上是脚本宝典为你收集整理的介绍Angular 工程化,构建对象,编译器全部内容,希望文章能够帮你解决介绍Angular 工程化,构建对象,编译器所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。