設定專案使用絕對路徑

往往在專案中，都會使用相對路徑(relative path)來import module，但是當程式檔案開始變多，此時就需要寫很多的../../../。 如以下範例:

import Header from "../../../features/Header";

const App = () => (
  <div className="app">
    <Header />
  </div>
);

然而最近學到可以透過設定來使用絕對路徑(absolute path)來import module，就會變成:

import Header from "features/Header";

const App = () => (
  <div className="app">
    <Header />
  </div>
);

首先，編輯webpack.config.js加入modules設定，假如你的程式碼都放在src/底下:

// webpack.config.js
module.exports = {
  // ...
  resolve: {
    // ...
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
    // ...
  },
  // ...
};

其實主要的設定就只有這樣。但因為開發上會使用到eslint，此時編輯器就會被劃惱人的紅線。

這時候我們就要去改eslintrc.js，首先需要確保已經安裝了eslint-plugin-import

yarn add --dev eslint-plugin-import

然後在eslintrc.js新增以下設定

// eslintrc.js
// ...
settings: {
  // eslint-plugin-import
  'import/resolver': {
    // eslint-import-resolver-node (default)
    node: {
      extensions: ['.js', '.jsx'],
      moduleDirectory: ['node_modules', 'src'],
    },
  },
},
// ...

最後，若你是使用vscode，可以去編輯jsconfig.json，新增baseUrl來增加vscode的intellisense，如下

{
  "compilerOptions": {
    "baseUrl": "src",
    "jsx": "react"
  },
  "exclude": ["node_modules", "build"],
  "include": ["src/**/*"]
}

接下來就可以安心的使用絕對路徑import module啦