点击导入的包,为何跳转到对应的.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图.
结合vue-router的例子再梳理一下整个查找过程:
- /src/router/node_modules/vue-router.ts(src/router/下没有node_modules文件夹,往上一级查找)
- /src/node_modules/vue-router.ts(src/下没有node_modules文件夹,往上一级查找)
-
/node_modules/vue-router.ts(和src文件夹平级的node_modules下没有vue-router.ts)
4./node_modules/vue-router/package.json文件的types属性
image.png - 根据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文件的使命完成.
在项目运行过程中,实际用的是用的哪个js文件?
vue-router/dist/文件夹下除了vue-router.d.ts文件,还有各种js文件,分别是什么用?什么时候使用?
-
vue-router.cjs.js:
image.png
后缀.cjs.js,表示符合CommonJs规范的js文件.
根据上面整理的解析过程可以知道在Node策略时加载该文件.比如webpack打包时候,会使用它
- vue-router.cjs.prod.js:
Node.js策略且生产环境时加载该文件.在package.json文件内没有找到
- vue-router.esm-browser.js:
esm几个字可以看出,该js文件使用ES6模块规范.在package.json文件内没有找到
- vue-router.esm-bundler.js:
使用rollup编译时,使用module属性对应的路径的文件解析.vue3编译时默认使用rollup
-
vue-router.global.js: jsdelivr 和npm上开启cnd的地址
image.png
jsdelivr 开启cnd的地址.比如vue官网上使用vue:
image.png
npm上开启cnd的地址.
