tsConfig/baseUrl -- 一键告别相对路径import
在tsConfig中,配置:
...
baseUrl: "src/",
paths: {"api/*": ["api/*"]}
...
在.eslintrc.json中:
"settings": {
"import/resolver": {
"node": {
"moduleDirectory": ["node_modules", "src"],
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
},
这样做是为了防止eslint报找不到模块的错误。经过上述配置,你就可以像import node_modules一样,import 本地的文件,假设目录结构如下:
src
├── api
│ └── index.ts
└── pages
└── App
└── index.tsx
在配置之前,你在页面中import api:
import api from '../../api/index'
配置之后:
import api from 'api/index'
完美~
webpack
如果你使用webpack作为bundler,还需要配置webpack的alias:
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
alias: {
'api': path.resolve(__dirname, './api'),
}
}
taro
如果是在taro中,还需要在config.js里配置alias,才能不会报错;
alias: {
'@/components': path.resolve(__dirname, '..', 'src/components'),
}
详见文档: https://taro-docs.jd.com/taro/docs/config-detail#alias
参考文档:
https://www.typescriptlang.org/tsconfig#baseUrl
https://www.npmjs.com/package/eslint-import-resolver-node
cnblogs-md-editor编辑器,用Markdown写博客就用它