Taro实现用绝对路径引用文件

我会带着你远行 2022-10-14 01:19 207阅读 0赞

1.  安装typescript

npm install -g typescript

1.  新建`tsconfig.json`文件，文件中加入以下内容，路径配置在 `path`中

{ 
      "compilerOptions": { 
        "paths": { 
          "@/component/*": ["./src/component/*"],
          "@/utils/*": ["./src/utils/*"],
          "@/api": ["./src/api"],
          "@/asset/*": ["./src/asset/*"],
          "@/const/*": ["./src/constants/*"],
          "@/image": ["./src/image"],
          "@/store/*": ["./src/store/*"],
        },
        "target": "es2017",
        "module": "commonjs",
        "removeComments": false,
        "preserveConstEnums": true,
        "moduleResolution": "node",
        "experimentalDecorators": true,
        "noImplicitAny": false,
        "allowSyntheticDefaultImports": true,
        "outDir": "lib",
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "strictNullChecks": true,
        "sourceMap": true,
        "baseUrl": ".",
        "rootDir": ".",
        "jsx": "react",
        "allowJs": true,
        "resolveJsonModule": true,
        "typeRoots": [
          "node_modules/@types",
          "src/type.d.ts"
        ]
      },
      "exclude": [
        "node_modules",
        "dist"
      ],
      "linterOptions": { 
        "exclude": ["node_modules/**"]
      },
    
      "compileOnSave": false
    }

1.  接下来x修改`config/index.js`文件，首先引入`path`

const path = require('path')

1.  然后 `config`里面新加属性

const config = { 
      alias: { 
        '@/component': path.resolve(__dirname, '..', 'src/component'),
        '@/utils': path.resolve(__dirname, '..', 'src/utils'),
        '@/api': path.resolve(__dirname, '..', 'src/api'),
        "@/asset": path.resolve(__dirname, '..', 'src/asset'),
        "@/constants": path.resolve(__dirname, '..', 'src/constants'),
        "@/image": path.resolve(__dirname, '..', 'src/image'),
        "@/store": path.resolve(__dirname, '..', 'src/store'),
      },
      }

1.  如何使用  
    在需要引入文件的地方通过`@`符号用绝对路径引入文件

import shop from '@/image/shop.jpeg'
    import ContentPanel from '@/component/ContentPanel'

1.  绝对路径引用文件的好处  
    不会让全篇都是…便于查找文件，不容易出错