首先, 模块引入的时候有两种方式:
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"
- ]
- }
- }
来源: http://www.bubuko.com/infodetail-3373664.html