使用crate-react-app創建的項目配置alias

使用crate-react-app創建的項目配置alias，這樣之后在項目中直接可以使用別名來訪問某個文件目錄，從而快速引用某個文件，如使用這個命令創建的項目中，我們這 src/ 目錄下創建一個 components/ 文件夾，如果想在項目中快速引用 components/Tab/index.tsx 文件的話，我們可這樣寫： import Tab from '@Component/Tab/index ，那么我們是怎么實現的呢？

 

首先我們在使用 crate-react-app 創建項目后，進入到項目中執行 npm run eject 命令，將 react-script 插件中封裝的 webpack、sass等配置文件暴露到項目中（注意此命令不可逆，也就是說，一旦解壓后就不能更新 react-script 插件版本來更新本地的配置文件）。

 

我們在 config/path.js 文件中的 module.exports 內添加  appComponents: resolveApp('src/components') ，如：

module.exports = {
  ...
  appComponents: resolveApp('src/components'),
  ...
};

 

接下來，我們打開 config/webpack.config.js 文件，在 alias 對象中添加 "@components": paths.appComponents，如：

alias: {
  ...
  "@components": paths.appComponents,
  ...
}

 

然后，我們打開 tsconfig.json 文件，在 compilerOptions 對象中添加 ，如：

{
    compilerOptions: {
        ...
        "baseUrl":".",
        "paths": {
            "@components/*": ["src/components/*"]
        },
        ....
    }
}

 

經過這三部設置后，你就可以在你的文件中通過 @components 別名訪問到 src/components 文件夾了，如：

我們在 src/ 文件夾下面添加 pages/ 文件夾，然后再添加一個 home/ 文件夾，在 home 文件夾下面添加 index.tsx 文件。那么我們在 src/pages/home/index.tsx 文件里面可以使用  import Tab from '@components/Tabindex' 來引入 src/components/Tab/index.tsx 文件了。

 

tsconfig.json 配置文件說明博客：https://www.imooc.com/article/305339?block_id=tuijian_wz