TypeScript和Node模块解析策略
一般我们在模块化编码时,总会导入其它模块,通常我们使用如下语法:
import { A } from './a'; // ES6语法
import { A } from 'a';
var A = require('./a'); // commonjs规范
不论使用哪种语法,导入的文件一般有两种:内部文件(自己开发的)和外部(node_modules)中两种,其中导入内部模块称之为相对导入,导入node_modules
中,称之为非相对导入,它们在语法上的区别就是导入的路径是否是相对的
接下来我们看看typescript和node中它们是如何解析模块的
Typescript模块解析策略
相对导入
假如b.ts
路径是:/root/src/b.ts
import { A } from './a';
typescript编译器在查找a模块时会依次按照如下顺序查找,如果仍然找不到则会模块找不到的错误。
/root/src/a.ts
/root/src/a.tsx
/root/src/a.d.ts
/root/src/a/package.json (如果指定了"types"属性,则使用types中)
/root/src/a/index.ts
/root/src/a/index.tsx
/root/src/a/index.d.ts
非相对导入
假如b.ts
路径是:/root/src/b.ts
import { A } from 'a';
typescript编译器在查找a模块时会按照如下顺序查找:
/root/src/node_modules/a.ts
/root/src/node_modules/a.tsx
/root/src/node_modules/a.d.ts
/root/src/node_modules/a/package.json
/root/src/node_modules/a/index.ts
/root/src/node_modules/a/index.tsx
/root/src/node_modules/a/index.d.ts
/root/node_modules/a.ts
/root/node_modules/a.tsx
/root/node_modules/a.d.ts
/root/node_modules/a/package.json
/root/node_modules/a/index.ts
/root/node_modules/a/index.tsx
/root/node_modules/a/index.d.ts
/node_modules/a.ts
/node_modules/a.tsx
/node_modules/a.d.ts
/node_modules/a/package.json
/node_modules/a/index.ts
/node_modules/a/index.tsx
/node_modules/a/index.d.ts
其中在上面两处空白行处,编译器会跳到上一级目录查找,直到到工程根目录
注意:有时候我们在导入外部模块(没有ts文件,只有),编译器会报模块找不到,但是我们node_modules
确实有,这种方式不是编译器bug而需要我们在配置文件tsconfig.json
中修改模块解析策略:
"moduleResolution": "node"
说到这里我们看看Nodejs
时如何解析模块的,NodeJs使用了commonjs
模块规范,typescript
编译和其大同小异。
Nodejs相对导入
假如b.ts
路径是:/root/src/b.js
var A = require('./a')
typescript编译器在查找a模块时会按照如下顺序查找:
/root/src/a
/root/src/a.js
/root/src/a.json
/root/src/a/package.json (如果指定了"main"属性,则使用main中的)
/root/src/a/index.js
/root/src/a/index.json
上述第二步中,假如main:"./core/main.js"
,则最终模块路径:
/root/src/a/core/main.js
Nodejs非相对导入
var A = require('a')
typescript编译器在查找a模块时会按照如下顺序查找:
/root/src/node_modules/a.js
/root/src/node_modules/a/package.json (如果指定了"main"属性,则使用main中的)
/root/src/node_modules/a/index.js
/root/node_modules/a.js
/root/node_modules/a/package.json (如果指定了"main"属性,则使用main中的)
/root/node_modules/a/index.js
/node_modules/a.js
/node_modules/a/package.json (如果指定了"main"属性,则使用main中的)
/node_modules/a/index.js
TypeScript和Node模块解析策略的更多相关文章
- 使用vscode写typescript(node.js环境)起手式
动机 一直想把typescript在服务端开发中用起来,主要原因有: javascript很灵活,但记忆力不好的话,的确会让你头疼,看着一月前自己写的代码,一脸茫然. 类型检查有利有敝,但在团队开发中 ...
- TypeScript 中非代码模块的导入
需要理解的是,TypeScript 作为语言,他只处理代码模块.其他类型的文件这种非代码模块的导入,讲道理是通过另外的打包工具来完成的,比如 Web 应用中的图片,样式,JSON 还有 HTML 模板 ...
- TypeScript 素描 - 模块解析、声明合并
模块解析 模块解析有两种方式 相对方式 也就是以/或 ./或-/开头的,比如import jq from "/jq" 非相对方式 比如 import model from ...
- webpack模块解析
前面的话 在web存在多种支持JavaScript模块化的工具(如requirejs和r.js),这些工具各有优势和限制.webpack基于从这些系统获得的经验教训,并将模块的概念应用于项目中的任何文 ...
- node.js 解析xml BOM问题(xmlreader sax.js)
Email:longsu2010 at yeah dot net 之前写了两篇文章关于node.js解析xml,说的是xmlreader,文章如下 node.js解析xml(xmlreader) no ...
- Commonjs规范及Node模块实现
前面的话 Node在实现中并非完全按照CommonJS规范实现,而是对模块规范进行了一定的取舍,同时也增加了少许自身需要的特性.本文将详细介绍NodeJS的模块实现 引入 nodejs是区别于java ...
- 模块机制 之commonJs、node模块 、AMD、CMD
在其他高级语言中,都有模块中这个概念,比如java的类文件,PHP有include何require机制,JS一开始就没有模块这个概念,起初,js通过<script>标签引入代码的方式显得杂 ...
- Python命令行选项參数解析策略
概述 在Python的项目开发过程中,我们有时须要为程序提供一些能够通过命令行进行调用的接口.只是,并非直接使用 command + 当前文件 就ok的,我们须要对其设置可选的各种各样的操作类型.所以 ...
- 【转】Commonjs规范及Node模块实现
前言: Node在实现中并非完全按照CommonJS规范实现,而是对模块规范进行了一定的取舍,同时也增加了少许自身需要的特性.本文将详细介绍NodeJS的模块实现 引入 nodejs是区别于javas ...
随机推荐
- New Life With 2018
2017年转眼过去了.对自己来说.这一大年是迷茫和认知的一年.我的第一篇博客就这样记录下自己的历程吧 一:选择 从进入这一行到现在已经一年多了,2016年11月份就像所有的应届毕业生一样,都贼反感毕业 ...
- linux保持管道中颜色显示
在linux工作中,不同类型的文件以不同的颜色显示,如文件夹显示蓝色,压缩文件显示橘黄色,可执行文件显示为绿色,链接失效文件高亮显示等等: 有时候根据颜色可以快速鉴别,如我有时为了保持目录的完整性,会 ...
- python的sorted函数
sorted很简单,没太多好写的 ,只是给自己做个笔记. sorted接受三个参数,返回一个排序之后的list. 第一个接受一个可迭代的对象(因为sorted实现了迭代协议,所以接受的参数不一定需要l ...
- SignalR的另类实现技巧
很久之前发表过一篇名为<通过三个DEMO学会SignalR的三种实现方式>的文章,在那篇文章里面详细介绍了在WEB应用下的常用SignalR实现方法,而今天我们来利用SignalR来实现其 ...
- vue2.0 页面A跳转到页面B,B页面停留在A页面的滚动位置的解决方法
如果页面A沿Y轴滚动一段距离,然后跳转到页面B: 在进入B页面时,B页面已经滚到页面A的距离,返回页面A,发现A还在之前的滚动位置: 这样体验就很不好,所以我们要进行一些处理: 我的方法是:在路由守卫 ...
- angular4.0运行在微信端的坑坑洼洼
最近的一个项目,我用ng4操刀,踩了超多的坑: 坑1:项目build后,刷新后404错误: 解决方案:<angular4.0项目build发布后,刷新页面报错404> 坑2:微信分享: 运 ...
- 获取Windows系统中的所有可用和在用串口
目的:获取Windows系统中的所有可用和在用串口 方法:注册表查询法 优点:简单.实用.快速.无遗漏,无多余结果. 说明:另外还有8种方法可以枚举串口,但都不如此法. 代码和详细注释如下: //-- ...
- Java学习笔记11---静态成员变量、静态代码块、成员变量及构造方法的初始化或调用顺序
当创建一个对象时,各种成员变量及构造方法的初始化或调用顺序是怎样的呢? (1).如果类尚未加载,则先初始化静态成员变量和静态代码块,再初始化成员变量,最后调用相应的构造方法: (2).如果类已经加载过 ...
- 文字太多?控件太小?试试 TextView 的新特性 Autosizeing 吧!
Hi,大家好,我是承香墨影! Android 8.0 已经发布了有一阵子了,如果你有在关注它,你应该会知道它新增了一个对于 TextView 字体大小变动的新特性:Autosizing. 本身这个新特 ...
- Windows下phpStudy配置独立站点详细步骤
本文讲如何在phpStudy下配置 域名->站点 步骤. 开始之前,我们先添加几个本地域名(host文件),如果有域名映射到主机此步可以跳过,直接看后面的phpStudy配置部分. 首先打开ho ...