前端该怎么引入模块文件

现在前端开发都在使用模块化,组建化,在开发实践中经常为引入模块的路径犯迷糊,不知道到底该使用相对路径,还是绝对路径,还是直接引用npm 包名,最近看《TypeScript Deep Dive》的一章解决了我的困惑。
先说结论,如果是引用自己写的组件或模块,就用相对路径,如果是npm 包,直接引用包名就好了。第一种尽量不用
有2中不同类型的模块,相对路径模块,动态查找的模块

1.相对路径模块

import foo from './foo'  在当前文件夹下查找foo 文件
import bar from '../bar'   在上个文件夹中查找bar
import bar from '../someFolder/bar'  

2.动态查找模块

如果这种声明引入模块  import foo from 'foo' 会查找以下路径:
./node_modules/foo
../node_modules/foo
../../node_modules/foo
直到文件系统的根目录

3.查找文件的顺序

当找到文件的位置,接下来是查找文件,比如 foo
如果 foo.ts 存在 ,成功,停止
如果 foo 是一个文件夹,有一个foo/index.ts 存在,成功
如果foo 是一个文件夹,有一个foo/package.json 存在,package.json中声明 types 键存在,成功
如果package.json 声明main 键值存在,成功。

posted @ 2019-03-21 21:59  行途于心  阅读(1321)  评论(0编辑  收藏  举报