typescript模块解析过程

点击导入的包,为何跳转到对应的.d.ts文件.

在src/router/index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

在VS code里Ctrl+鼠标点击vue-router,跳转到node_modules/vue-router/dist/vue-router.d.ts文件.

为什么会跳转到这个文件?

模块解析过程

根据typescript模块解析整理了以下xmind图.

模块解析.png

结合vue-router的例子再梳理一下整个查找过程:

1. /src/router/node_modules/vue-router.ts(src/router/下没有node_modules文件夹,往上一级查找)
2. /src/node_modules/vue-router.ts(src/下没有node_modules文件夹,往上一级查找)

3. /node_modules/vue-router.ts(和src文件夹平级的node_modules下没有vue-router.ts)
   4./node_modules/vue-router/package.json文件的types属性

   
   image.png
4. 根据types对应的路径即:dist/vue-router.d.ts定位到了文件.
   所以:Ctrl+鼠标点击vue-router,跳转到node_modules/vue-router/dist/vue-router.d.ts文件.

.d.ts文件是什么?有什么用?

是什么?定义数据类型的typescript文件.
有什么用?
①编写代码时,编辑器根据.d.ts文件会有提示
②在TypeScript编译为JavaScript的过程中,用来进行类型检查.此后.d.ts文件的使命完成.

image.png

在项目运行过程中,实际用的是用的哪个js文件?

vue-router/dist/文件夹下除了vue-router.d.ts文件,还有各种js文件,分别是什么用?什么时候使用?

image.png

1. vue-router.cjs.js:

   
   image.png

后缀.cjs.js,表示符合CommonJs规范的js文件.
根据上面整理的解析过程可以知道在Node策略时加载该文件.比如webpack打包时候,会使用它

2. vue-router.cjs.prod.js:

Node.js策略且生产环境时加载该文件.在package.json文件内没有找到

3. vue-router.esm-browser.js:

esm几个字可以看出,该js文件使用ES6模块规范.在package.json文件内没有找到

4. vue-router.esm-bundler.js:

使用rollup编译时,使用module属性对应的路径的文件解析.vue3编译时默认使用rollup

5. vue-router.global.js: jsdelivr 和npm上开启cnd的地址

   
   image.png

jsdelivr 开启cnd的地址.比如vue官网上使用vue:

image.png

image.png

npm上开启cnd的地址.