很多時候我們使用別人的庫，都是通過 npm install，再簡單的引入，就可以使用了。

   

1 2	import React from 'react' import { connect } from 'react-redux'

那如果我們自己寫的元件庫和工具 utils 類怎麼辦？如果你不熟悉別名的概念，通常會引入相對路徑，它會變成這樣。

   

1 2 3

import { someConstant } from './../../config/constants' import MyComponent from './../../../components/MyComponent' import { digitUppercase } from './../../../utils'

如果是頻繁的引用使用，這樣的引用方式的確不是很優雅。接下來就告訴你通過別名的方式可以使用絕對路徑去引用本地自己寫的元件和工具類。

   

1 2 3 4 5

import React from 'react' import { connect } from 'react-redux' import { someConstant } from 'config/constants' import MyComponent from 'components/MyComponent' import { digitUppercase } from 'utils'

我們需要在 Webpack, Jest, Babel 和 VSCode 對應的配置指令碼中宣告即可。

對於這篇文章，假設一個應用程式結構如下：

   

1 2 3 4 5 6 7 8 9

MyApp/   dist/   src/     config/     components/     utils/   jsconfig.json   package.json   webpack.config.js

 

Webpack 配置

不使用任何額外的外掛，Webpack 允許通過配置中的 resolve.alias 屬性匯入別名模組。

   

1 2 3 4 5 6 7

module.resolve = {   alias: {     config: path.resolve(__dirname, "..", "src", "config"),     components: path.resolve(__dirname, "..", "src", "components"),     utils: path.resolve(__dirname, "..", "src", "utils"),   } }

副作用：當 Webpack 知道如何處理這些別名時，VSCode 卻不會，像 Intellisense 這樣的工具將無法工作。

VS Code 配置

配置 jsconfig.json

首先你要在專案中建立一個 jsconfig.json（建議放在專案的根目錄中）。

你可以自己新建一個 json 檔案修改檔名為 jsconfig.json。或者如果你全域性安裝了 typescript，那麼在專案根目錄執行 tsc --init 即可生成一個 tsconfig.json 然後修改為 jsconfig.json即可。根據文件上說 jsconfig.json 是預設開啟了 "allowJs": true 的 tsconfig.json，所以直接用 tsc --init 生成一個，這樣所有配置都會帶有註釋說明。

更多詳細配置請看 官網文件 jsconfig.json。

最後記得重啟下 VS Code 使其生效。

通過告訴 VS Code 如何理解這些別名可以讓它變得“更聰明”，就像在 jsconfig.json 檔案中使用 exclude 屬性，可以在搜尋的時候排除 node_modules 或編譯的資料夾（如 dist）來加快 VS Code 的全域性搜尋速度。

   

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

{   "compilerOptions": {     "target": "ES6",     "jsx": "react",     "experimentalDecorators": true,     "baseUrl": ".",     "paths": {       "components/*": ["src/components/*"],       "config/*": ["src/config/*"],       "utils/*": ["src/utils/*"]     }   },   "exclude": ["node_modules, "dist""] }

 

智慧路徑提示

需要安裝外掛Path Intellisense，並且進行配置（專案或者全域性的settings.json）：

   

1 2 3 4 5

"path-intellisense.mappings": {     "config": "${workspaceRoot}/src/config",     "component": "${workspaceRoot}/src/component",     "utils": "${workspaceRoot}/src/utils"   }

使用路徑的就可以智慧提醒路徑，按住 ⌘command就可以跳轉到對應程式碼了。

Babel 配置

babel-plugin-module-resolver 是一個 Babel 模組解析外掛，在 babelrc 中可以配置模組的匯入搜尋路徑為模組新增一個新的解析器。這個外掛允許你新增新的 “根” 目錄，這些目錄包含你的模組。它還允許您設定一個自定義別名目錄，具體的檔案，甚至其他 NPM 模組。

如果你要安裝它，根據以下步驟就可以了：

   

1	npm install --save-dev babel-plugin-module-resolver

安裝完成以後，我們在專案的根目錄下，新建一個 .babelrc 配置檔案：

   

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

const path = require('path');   module.exports = {   plugins: [     [       'module-resolver',       {         alias: {           components: path.join(__dirname, './src/components'),         },       },     ],     [       'import',       {         libraryName: 'antd',         style: true, // or 'css'       },     ],   ], };