Angular项目配置文件的作用，以及配置项的作用。

石山岭
206 阅读7分钟

Angular学习之路。

tsconfig.spec.json

tsconfig.spec.json 文件在 Angular 项目中用于配置 TypeScript 编译器选项，专门针对单元测试（spec）文件。它的主要作用包括：

  1. 测试环境的配置：提供一个特定的 TypeScript 配置，以支持 Jasmine 和 Karma 等测试框架的功能。
  2. 文件包含：通常会包含所有 .spec.ts 文件，并排除不必要的源代码文件，确保测试时只编译相关的代码。
  3. 编译选项：可以设置特定于测试的编译选项，比如更严格的类型检查或不同的目标输出。
  4. 模块解析：定义如何解析模块，以便能够正确导入测试所需的模块和库。

例如：

{
  //`"./tsconfig.json"` 表示该配置文件继承了根配置文件 `tsconfig.json` 的设置，这样可以复用基本配置，避免重复。
  "extends": "./tsconfig.json",
  "compilerOptions": {
    //`"./out-tsc/spec"` 指定编译输出的目录。所有的测试文件编译后的输出会放在这个文件夹中。
    "outDir": "./out-tsc/spec",
    //`["jasmine"]` 指定需要包含的类型定义文件，这里表示使用 Jasmine 的类型定义，方便 TypeScript 知道 Jasmine 中的函数和对象的类型。
    "types": [
      "jasmine"
    ]
  },
   //`["src/**/*.spec.ts", "src/**/*.d.ts"]` 指定要包含的文件。在这里，它包含了所有的测试文件（`.spec.ts`）以及类型定义文件（`.d.ts`），确保编译器能够处理这些文件。
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ]
}

tsconfig.json

tsconfig.json 文件是 TypeScript 项目的核心配置文件，定义了 TypeScript 编译器的行为和项目结构。

新项目创建后需要添加的配置。

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",//设置模块解析的基础路径。 例如 ./**/**/**/**/image.png
    "forceConsistentCasingInFileNames": true,//强制要求代码中使用的模块文件名必须和文件系统中的文件名保持大小写一致。实测没啥用，加不加都强制要求名称一直。
    "strict": true,//开启一系列严格的类型检查规则，模式就是true，一般不用在意
    "noImplicitOverride": true,//要求在重写基类方法时，必须明确使用 `override` 关键字
    "resolveJsonModule": true,//允许在项目中直接导入 JSON 文件作为模块，导入方式import jsonData from './path/to/data.json'; 这里的 jsonData 将是一个 JavaScript 对象
    
    "exactOptionalPropertyTypes":true,默认是true。colorThemeOverride?: "dark" | "light"; 只允许给colorThemeOverride赋值为"dark" 或 "light"
    "noFallthroughCasesInSwitch":true,//确保switch case 每个条件都有 black、return或throw。这个创建项目默认就有。
    "noImplicitAny":true,//默认是true。 禁止`没有类型注释时默认是any`的配置
    "noImplicitOverride": true,//默认是true，实现 继承类的方法时需要添加 Override
    "noImplicitReturns": true,//默认是true，当含数字某个条件有返回值，那么其他条件都应该有返回值。
    "noImplicitThis":true,//默认是true，在隐含“any”类型的“this”表达式上引发错误。
    "noPropertyAccessFromIndexSignature": true,//默认是true。此设置确保通过（`obj.key`）语法和“indexed”（`obj["key"]`）访问字段以及在类型中声明属性的方式之间的一致性。
    "noUncheckedIndexedAccess":true,//默认是false，具体解释看 "noUncheckedIndexedAccess示例代码"

       //推荐开启的功能
    "noUnusedLocals":true,//不许云用未使用的局部变量
    "noUnusedParameters":true,//不允许未使用的参数
    "allowUnreachableCode": false,//不允许无法到达的代码
    "moduleSuffixes": [".ios", ".native", ""],//模块查找后缀名。import * as foo from "./foo";TypeScript将查找相对文件`./foo.ios.ts`、`./foo.native.ts`，最后是`./foo.ts`。
    //推荐使用的功能
    "paths": {//自定义某些文件路径的快捷导入方式
        "@app/*": ["./src/app/*"],
        "@ssl/*": ["ssl/*"]
    },
    
    "include": ["src/**/*", "tests/**/*", "ssl/**/*"],//允许哪些文件导入到项目
    }
}
noUncheckedIndexedAccess示例代码
interface EnvironmentVars {
    // Unknown properties are covered by this index signature.
    [propName: string]: string;

}
const nodeEnv = env.NODE_ENV;
//当"noUncheckedIndexedAccess":false,
const nodeEnv: string;//const nodeEnv: string
//当"noUncheckedIndexedAccess":true,
const nodeEnv: string;//const nodeEnv: string | undefined

package.json文件

{
  "name": "my-angular-app",//项目名字
  "version": "1.0.0",//项目版本
  "scripts": {//脚本命令
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,//标识项目是私有的.防止发布：安全性：
  "dependencies": {//指定项目在运行时所需的依赖包
    "@angular/animations": "^18.1.0",
    "@angular/common": "^18.1.0",
    "@angular/compiler": "^18.1.0",
    "@angular/core": "^18.1.0",
    "@angular/forms": "^18.1.0",
    "@angular/platform-browser": "^18.1.0",
    "@angular/platform-browser-dynamic": "^18.1.0",
    "@angular/router": "^18.1.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {//指定项目在开发过程中所需的依赖包。这些依赖通常不在生产环境中使用
    "@angular-devkit/build-angular": "^18.1.1",
    "@angular/cli": "^18.1.1",
    "@angular/compiler-cli": "^18.1.0",
    "@types/jasmine": "~5.1.0",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.5.2"
  }
}

脚本命令也有很多门道。 例如 ng build 后面可以跟一些配置项.具体配置项 查看地址

常用的有：

  • --base-href 正在构建的应用程序的 base URL 也就是项目存放在服务器的地址
  • --configuration 构建器的一个或多个命名配置，是一个逗号分隔的列表。想知道怎么配置 查看地址
  • --deploy-url 项目文件部署到的url，项目部署到服务器的地址。
  • --index 配置应用程序的 index.html 的生成方式（生成地址）。
  • --output-path新输出目录的完整路径，是相对于当前工作空间的。默认情况下，会将输出写入当前项目中名为 dist/ 的文件夹。
  • --prod "--configuration=production" 的简写形式。
  • --port 4208 设置端口号。
  • --proxy-config 设置代理文件 例如本地环境代理到dev环境。

多个命令拼接：
n 20.11.1 && npm i && ng build --configuration=production --base-href=/web-console/
命令解析：
先使用n命令切换node到20.11.1版本（n 20.11.1）。然后使用npm i更新本地插件。再然后ng build编译生成包，生成的环境是生产（--configuration=production），项目基础链接是/web-console/（--base-href=/web-console/）

然后引入插件时，怎么区分引入到devDependencies还是dependencies？

  • dependencies
    npm install package-name --save
  • devDependencies
    npm install package-name --save-dev

package-lock.json 锁文件

package-lock.json 是在 npm(^5.x.x.x)后才有。

npm依赖包版本号

npm默认所有的Node包都使用语义化版本号，这是一套指导开发人员如何增长版本号的规则。

每个版本号都形如：7.8.1，有三部分组成，依次叫主版本号、次版本号、修订号；

符号 ^/~ 作用

^ 兼容某个大版本，也就是只更新次版本号和修订号。
如：^1.1.2 ，表示>=1.1.2 <2.0.0，
~ 兼容某个次版本，也就是说只更新修订号
如：~1.1.2，表示>=1.1.2 <1.2.0

这个文件主要是用来锁定包的版本,npm install后自动生成.

package.json里面的包版本不是一个具体的版本，而是一个最优版本，就是带^/~符号的。所以他和package-lock.json里面的版本可能不一样。
什么情况下，package-lock.json文件会发生变化？当 ：

  • npm i package-name 引入一个新插件。
  • npm i package-name@*.*.* 指定更新到插件的某一个版本
  • npm update package-name 更新到package.json中该插件允许的最新版本
  • 手动更改了package.json中某个插件的版本号。
  • 将所有插件更新到最新版本 想在控制台输入npm install -g npm-check-updates，然后在项目中运行 ncu -u。
  • 删除package-lock.json然后进行npm install操作，即可将插件更新到package.json文件中限制的最大版本，例如 ^1.0.0 可以更新到 ^1.XX.X,大版本不会变

如果想使用某个插件的固定版本，可以在package.json文件中把该插件版本前面的^/~符号给去掉写一个固定版本，就像这样 "rxjs": "7.8.1"。

proxy.conf.js 网络代理文件

文件内容

const PROXY_CONFIG = [
  {
  //包含需要代理的请求路径前缀
    context: [
      "/api",
      "/static",
    ],
    //这是代理请求的目标地址。，所有匹配 `context` 的请求将会被转发到
    target: "https://baidu.com",
    //设置为 `false`，表示在与目标服务器进行 HTTPS 请求时，不验证 SSL 证书。这在开发环境中常见，尤其是在使用自签名证书时。
    secure: false,
    //这是一个函数，允许你在请求被代理之前修改请求的头部信息。这个函数接收三个参数： `req`：请求对象。 `res`：响应对象。 `proxyOptions`：代理的选项。
    bypass: function (req, res, proxyOptions) {
      // console.log(req.headers);
      //被设置为目标服务器的主机名。
      req.headers["host"] = "baidu.com";
      //被设置为目标服务器的 URL。
      req.headers["origin"] = "https://baidu.com";
      //被设置为目标服务器的 URL。
      req.headers["referer"] = "https://baidu.com";
    }
  },
]
  module.exports = PROXY_CONFIG;

生效方式有两种。

  1. ng serve --proxy-config proxy.conf.js
  2. 修改angular.json文件，修改文件后需要重新 ng serve才生效
"architect": {
        "serve": {
          "options": {
            "proxyConfig": "proxy.conf.js"
          }
        },

angular.json文件

这里 介绍灰常详细。

.gitignore文件

git仓库，文件忽略管理。这篇文章解释的很详细

.editorconfig文件

作用：帮助多个开发人员在不同的编辑器和IDE中维护一致的编码风格。 官网

avatar
文章
阅读
粉丝