Angular tsconfig.json 文件里的 paths 用途

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

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


我们直接来到 paths 字段:



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


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


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


考虑下面的例子:



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


例如下面的用法:


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


Spartacus 项目的 baseUrl 用法:




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 的值:.



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


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


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

相关文章
|
3天前
|
JSON 关系型数据库 数据库
【python】Python将100个PDF文件对应的json文件存储到MySql数据库(源码)【独一无二】
【python】Python将100个PDF文件对应的json文件存储到MySql数据库(源码)【独一无二】
【python】Python将100个PDF文件对应的json文件存储到MySql数据库(源码)【独一无二】
|
1天前
|
JSON 前端开发 JavaScript
jQuery ajax读取本地json文件 三级联动下拉框
jQuery ajax读取本地json文件 三级联动下拉框
|
3天前
|
Web App开发 前端开发 JavaScript
关于 Angular template 文件在 Chrome 开发者工具调试器里的断点问题
关于 Angular template 文件在 Chrome 开发者工具调试器里的断点问题
24 7
|
3天前
|
安全 JavaScript 前端开发
Angular 配置文件 tsconfig.lib.json 里的 strictTemplates 选型
Angular 配置文件 tsconfig.lib.json 里的 strictTemplates 选型
8 0
|
3天前
|
Web App开发 存储 JSON
Chrome插件开发(一)—manifest.json文件介绍
Chrome插件开发(一)—manifest.json文件介绍
10 0
|
3天前
|
JSON JavaScript 前端开发
vue的 blob文件下载文件时,后端自定义异常,并返回json错误提示信息,前端捕获信息并展示给用户
vue的 blob文件下载文件时,后端自定义异常,并返回json错误提示信息,前端捕获信息并展示给用户
|
3天前
|
前端开发
【专栏】在前端开发中,package.json 文件是项目的重要配置文件,其中包含了许多与项目相关的信息和设置
【4月更文挑战第29天】`package.json`的`proxy`字段用于配置开发环境中的代理服务器,解决跨域问题并模拟后端响应。它是字符串类型,值为代理服务器地址。主要应用场景包括前端跨域请求和本地调试。配置时在`package.json`顶层添加`proxy`字段,如`"proxy": "http://localhost:8080"`。该配置仅在开发环境中生效,生产环境需另寻解决方案。
|
3天前
|
JSON 前端开发 JavaScript
Vue+Axios+SpringBoot后端同时接收文件和json作为请求参数
Vue+Axios+SpringBoot后端同时接收文件和json作为请求参数
39 0
|
3天前
|
存储 JSON 数据格式
python读取同路径下的json文件,并解析
使用Python的`json`模块读取和解析JSON文件,首先导入json模块,再用`open()`结合`json.load()`读取文件内容到`data`。通过字典和列表语法访问JSON数据,如`data['name']`获取名字,`data['items']`获取列表,可循环遍历列表元素。
18 0
|
3天前
|
存储 前端开发 API
浅谈 Angular 应用前端消息显示机制的一个实际需求
浅谈 Angular 应用前端消息显示机制的一个实际需求
13 0

热门文章

最新文章