Taro alias

alias

object

用于配置目錄別名，從而方便書寫代碼引用路徑。

例如，使用相對路徑書寫文件引用如下：

import A from '../../componnets/A'
import Utils from '../../utils'
import packageJson from '../../package.json'
import projectConfig from '../../project.config.json'

為了避免書寫多級相對路徑，我們可以如下配置 alias：

module.exports = {
  // ...
  alias: {
    '@/components': path.resolve(__dirname, '..', 'src/components'),
    '@/utils': path.resolve(__dirname, '..', 'src/utils'),
    '@/package': path.resolve(__dirname, '..', 'package.json'),
    '@/project': path.resolve(__dirname, '..', 'project.config.json'),
  }
}

通過上述配置，可以將 src/components 和 src/utils 目錄配置成別名，將根目錄下的 package.json 和 project.config.json 文件配置成別名，則代碼中的引用改寫如下：

import A from '@/components/A'
import Utils from '@/utils'
import packageJson from '@/package'
import projectConfig from '@/project'

為了讓編輯器（VS Code）不報錯，并繼續(xù)使用自動路徑補全的功能，需要在項目根目錄下的 jsconfig.json 或者 tsconfig.json 中配置 paths 讓編輯器認得我們的別名，形式如下：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["./src/components/*"],
      "@/utils/*": ["./src/utils/*"],
      "@/package": ["./package.json"],
      "@/project": ["./project.config.json"],
    }
  }
}

建議別名使用 @/ 開頭而非僅用 @ 開頭，因為有小概率會與某些 scoped 形式的 npm 包（形如：

@tarojs/taro, @babel/core）產(chǎn)生命名沖突。