Angular tsconfig.json 文件里的 paths 用途

简介: Angular tsconfig.json 文件里的 paths 用途

Angular 项目目录中的 TSConfig 文件表明该目录是 TypeScript 或 JavaScript 项目的根目录。 TSConfig 文件可以是 tsconfig.json 或 jsconfig.json,两者都有相同的配置变量集。


我们直接来到 paths 字段:

06b5ad622643a198378d3e1e8d3d777b.png

这是一个对象,定义了一系列将导入(import)重新映射到相对于 baseUrl 的查找位置的条目。


所谓 baseUrl,允许开发人员设置基本目录以解析非绝对模块名称。


我们可以定义一个根文件夹,然后可以在其中进行绝对文件解析。


考虑下面的例子:

848cd677e257349cb25175473d0c0830.png

在此项目中使用 “baseUrl”: “./”,TypeScript 将查找从与 tsconfig.json 相同的文件夹开始的文件。


例如下面的用法:


import { helloWorld } from "hello/world";
console.log(helloWorld);


Spartacus 项目的 baseUrl 用法:

e0f6aea51c462641210f32ccccd4115d.png

paths 内的值,允许开发人员声明 TypeScript 应该如何解析应用程序的 require/imports 中的导入。

{
  "compilerOptions": {
    "baseUrl": ".", // this must be specified if "paths" is specified.
    "paths": {
      "jquery": ["node_modules/jquery/dist/jquery"] // this mapping is relative to "baseUrl"
    }
  }
}


上面代码的作用:


这将使开发人员能够编写 import “jquery”,并在本地获得所有正确的输入。


paths 字段支持 * 通配符:


{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
        "app/*": ["app/*"],
        "config/*": ["app/_config/*"],
        "environment/*": ["environments/*"],
        "shared/*": ["app/_shared/*"],
        "helpers/*": ["helpers/*"],
        "tests/*": ["tests/*"]
    },
}


在这种情况下,开发人员可以告诉 TypeScript 文件解析器支持许多自定义前缀来查找代码。 此模式可用于避免代码库中较长的相对路径。


rootDir


所有非声明输入文件的最长公共路径。 如果设置了复合,则默认为包含 tsconfig.json 文件的目录。


Spartacus rootDir 的值:.

e0f6aea51c462641210f32ccccd4115d.png

当 TypeScript 编译文件时,它在输出目录中保持与输入目录中相同的目录结构。


例如,假设有下面这些输入文件:

94aaa9da06380044ae65a1e85285d39e.png

rootDir 的推断值是所有非声明输入文件的最长公共路径,在本例中为 core/。


目录
相关文章
|
2月前
|
Web App开发 JSON JavaScript
SAP UI5 应用程序小技巧 - 一键将 JSON 对象导出成本地 json 文件
SAP UI5 应用程序小技巧 - 一键将 JSON 对象导出成本地 json 文件
25 0
|
2月前
|
JSON 数据格式 开发者
什么是 JSON 文件的 Schema
什么是 JSON 文件的 Schema
96 0
|
3月前
|
XML JSON JavaScript
|
3月前
|
JSON Shell DataX
DataX定时执行json脚本文件
DataX定时执行json脚本文件
145 0
|
4月前
|
存储 JSON 关系型数据库
Pandas载入txt、csv、Excel、JSON、数据库文件讲解及实战(超详细 附源码)
Pandas载入txt、csv、Excel、JSON、数据库文件讲解及实战(超详细 附源码)
66 0
|
1月前
|
JSON 前端开发 数据格式
vue-cli3读取本地json文件
vue-cli3读取本地json文件
51 1
|
3月前
|
Web App开发 前端开发
Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型(Types)、方法(Methods)和事件(Events)的属性和参数解析
Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型(Types)、方法(Methods)和事件(Events)的属性和参数解析
156 0
|
2月前
|
编解码 JavaScript 前端开发
TypeScript【第三方声明文件、自定义声明文件、tsconfig.json文件简介、tsconfig.json 文件结构与配置】(六)-全面详解(学习总结---从入门到深化)
TypeScript【第三方声明文件、自定义声明文件、tsconfig.json文件简介、tsconfig.json 文件结构与配置】(六)-全面详解(学习总结---从入门到深化)
63 0
|
1月前
|
JSON 数据处理 API
盘点Python中4种读取JSON文件和提取JSON文件内容的方法
盘点Python中4种读取JSON文件和提取JSON文件内容的方法
316 0
|
1月前
|
存储 JSON JavaScript
Python中读写(解析)JSON文件的深入探究
Python中读写(解析)JSON文件的深入探究
33 0