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'

完美~

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM