Angular2.x/Typescript模块引入解析

首先,模块引入的时候有两种方式:
1、相对导入:

import Entry from "./components/Entry";
import { DefaultHeaders } from "../constants/http";
import "/mod";

相对导入在解析时是相对于导入它的文件,并且不能解析为一个外部模块声明,你应该为你自己写的模块使用相对导入,这样能确保它们在运行时的相对位置。

2、非相对导入:

import * as $ from "jQuery";
import { Component } from "@angular/core";

非相对模块的导入可以相对于baseUrl(在tsconfig.json中配置,详见https://www.tslang.cn/docs/handbook/module-resolution.html )或通过下文会讲到的路径映射来进行解析。 它们还可以被解析成 外部模块声, 使用非相对路径来导入你的外部依赖或者你项目的公共库(Angular8 后创建项目默认就是一个多个项目合集的workspace,项目间能更友好的访问)。

当我们import后,Angualr2.x/Typescript是怎么来解析找到我们的模块的呢?

比如有一个相对导入,有一个导入语句import { b } from "./moduleB"在/root/src/moduleA.ts里,会以下面的流程来定位"./moduleB":

/root/src/moduleB.ts
/root/src/moduleB.tsx
/root/src/moduleB.d.ts
/root/src/moduleB/package.json (如果指定了"types"属性)
/root/src/moduleB/index.ts
/root/src/moduleB/index.tsx
/root/src/moduleB/index.d.ts

我们可以看到,首先会在同级别目录下找moduleB-》moduleB的声明文件(.d.ts),假设都没有找到那么就会找同级别目录下的moduleB目录,其下的packages.json-》index -》index声明文件, 当然这些文件中要有关于b模块的export语句

另外一个非相对导入,import { b } from "moduleB"在/root/src/moduleA.ts里,会以下面的流程来定位"./moduleB":

/root/src/node_modules/moduleB.ts
/root/src/node_modules/moduleB.tsx
/root/src/node_modules/moduleB.d.ts
/root/src/node_modules/moduleB/package.json (如果指定了"types"属性)
/root/src/node_modules/moduleB/index.ts
/root/src/node_modules/moduleB/index.tsx
/root/src/node_modules/moduleB/index.d.ts

/root/node_modules/moduleB.ts
/root/node_modules/moduleB.tsx
/root/node_modules/moduleB.d.ts
/root/node_modules/moduleB/package.json (如果指定了"types"属性)
/root/node_modules/moduleB/index.ts
/root/node_modules/moduleB/index.tsx
/root/node_modules/moduleB/index.d.ts

/node_modules/moduleB.ts
/node_modules/moduleB.tsx
/node_modules/moduleB.d.ts
/node_modules/moduleB/package.json (如果指定了"types"属性)
/node_modules/moduleB/index.ts
/node_modules/moduleB/index.tsx
/node_modules/moduleB/index.d.ts

这里请注意会逐级网上找,并且都是在node_modules里面,这个目录是node npm的包管理目录。

下面我来看一个具体的例子来实现不同方式的公共库导入:
我们有一个Hello项目,下面有一个src,下面有一个services,然后下面有一个Hello.ts;
然后有一个公共的库Common和Hello目录同级,下面有一个services,然后下面有一个Common.ts(Common中export了Common和Common1两个模块)
我们在Hello.ts需要导入Common库有以下几种方式

最原始的方式:
import { Common, Common1 } from ‘../../../Common/services/Common‘;
如果在Common下定义了一个index.ts里面有 export * from ‘./services/Common‘; 则可以用下面语句
import { Common, Common1 } from ‘../../../Common‘;

但是这种相对导入的库文件的方式有一个问题,如果这个Common文件夹位置移动,那么import过它的都需要进行相应更改,因为相对引用是根据当前引用文件的位置来的,这样我们来考虑非相对引入,如下:
import {Common, Common1} from ‘common/services/Common‘;
import {Common, Common1} from ‘common‘;
采用这种方式需要在tsconfig.ts中配置paths目录,让程序知道common到哪里去寻找

compilerOptions: {
        ...
    "baseUrl": "./", //配置baseUrl为tsconfig.ts的位置
        "paths": {
      "common": [
        "../common"
      ],
      "common/*": [
        "../common/*" // 此处映射是相对于"baseUrl"
      ]
    }
}

原文地址:https://blog.51cto.com/13934921/2465677

时间: 2024-10-09 14:26:29

Angular2.x/Typescript模块引入解析的相关文章

python模块引入问题集锦与解析

1.入口文件不能用相对路径引入模块和包 所谓的入口文件,就是你需要执行的脚本文件. 文件架构如下: ---mother_dir ---from_test_dir ---tools_dir ---__init__.py ---demo.py ---__init__.py ---index.py ---__init__.py 上面_dir后缀的名字,都是python package模块名. 在如上的文件架构中假设index.py是入口文件,也就是我们需要执行的脚本,我们以index.py为起点,去引

Unity加载模块深度解析(网格篇)

在上一篇 加载模块深度解析(一)中,我们重点讨论了纹理资源的加载性能.这次,我们再来为你揭开其他主流资源的加载效率. 这是侑虎科技第53篇原创文章,欢迎转发分享,未经作者授权请勿转载.同时如果您有任何独到的见解或者发现也欢迎联系我们,一起探讨.(QQ群465082844) 资源加载性能测试代码 与上篇所提出的测试代码一样,我们对于其他资源的加载性能分析同样使用该测试代码.我们将每种资源均制作成一定大小的AssetBundle文件,并逐一通过以下代码在不同设备上进行加载,以期得到不同硬件设备上的资

Angular2 和TypeScript

Angular2 和TypeScript 原文链接:https://www.infoq.com/articles/Angular2-TypeScript-High-Level-Overview 作者:  Yakov Fain Posted on  Apr 26, 2016 -----------------------------------------------------------------------------------------------------------------

[译]Angular2 和TypeScript -- 一次简要的预览

原文链接:https://www.infoq.com/articles/Angular2-TypeScript-High-Level-Overview 作者:  Yakov Fain Posted on  Apr 26, 2016 ------------------------------------------------------------------------------------------------------------------------------ Angular

python ConfigParser模块 配置文件解析

ConfigParser模块主要是用来解析配置文件的模块,像mysql,或者win下面的ini文件等等 下面我们来解析mysql的配置文件my.cnf my.cnf配置文件内容 [mysqld] datadir=/var/lib/mysql socket=/var/lib/mysql/mysql.sock user=mysql # Disabling symbolic-links is recommended to prevent assorted security risks symbolic

Unity加载模块深度解析(Shader)

作者:张鑫链接:https://zhuanlan.zhihu.com/p/21949663来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 接上一篇 加载模块深度解析(二),我们重点讨论了网格资源的加载性能.今天,我们再来为你揭开Shader资源的加载效率. 这是侑虎科技第59篇原创文章,欢迎转发分享,未经作者授权请勿转载.同时如果您有任何独到的见解或者发现也欢迎联系我们,一起探讨.(QQ群465082844) 资源加载性能测试代码 与上篇所提出的测试代码一样,我们

perl6 JSON::Fast模块json解析的使用

关于JSON: JSON (JavaScript Object Notation)是一种轻量级的数据交换格式,语法简单,各种语言都有相应的库或者模块支持. 因为JSON非常小巧,解析起来又非常简单,我经常会把配置文件组织成JSON格式. 关于JSON::Fast: 在http://modules.perl6.org/上的介绍:A naive, but hopefully fast json parser; drop-in replacement for JSON::Tiny 一个单纯的,快速的J

seajs模块路径解析 简单总结

seajs模块路径解析 最近在试着用seajs + grunt改造现有项目, 遇到的最大的问题就是seajs命名与调用, 简单总结一下. 模块调用 seajs中调用模块有两种方式,seajs.use(ID) . require(ID). ID命名 完整绝对路径 例如 "http://example.com/test/js/jquery/jquery.js" 以 "." 开头 例如 "./home/main" "../main"

es6模块 nodejs模块和 typescript模块

es6模块 import和export nodejs模块 require和module.exports typescript模块 module和export 原文地址:https://www.cnblogs.com/mttcug/p/8120274.html