如果有使用 ES6 Module 做網頁開發的話,像是使用 React, Angular …等等,你將會把寫的元件或 function export 出去讓其他元件使用,另外使用 eslint 的 eslint-plugin-import  配合 VSCode 的 eslint 檢查就可以即時知道 import 是不是引用錯路徑,對於開發錯誤的檢查可以省去不少時間。

eslint 的檢查設定請參照官網設定或以下

// 快速流程

$ yarn eslint
$ eslint --init // choose popular
// 在 root 目錄會出現 .eslintrc 中加上
{
...
"import/no-unresolved": 2,
}

當 Eslint 設定好之後,回到頁面的開發,網站代碼可能像這樣

// filePath: src/module1/module1_1/SuperAwesomeApp.jsx

import React from 'react';
const SuperAwesomeApp = () => (
  <div>this is my App</div>
);
export default SuperAwesomeApp;

該檔案路徑看起來非常的長,如果在別的檔案很深層的地方要引用它,就必須得這樣設定

// filePath: src/module2/module2_1/SecondModule.jsx

import React from 'react';
import SuperAwesomeApp from '../../../module1/module1_1/SuperAwesomeApp'

const SecondModule = () => (
  <SuperAwesomeApp />
);
export default SuperAwesomeApp;

看看路徑的地方非常的攏長瑣碎,常常這樣寫專案的整潔度就非常差

這時有兩個方法可以簡化 import 的路徑

#1 Webpack 設定

如果你的專案可以看到 webpack ,或你已經有 webpack 設定了(那你基本應該已經做完了),如果看不到 webpack 設定並且你是 create-react-app 的專案,我會建議就把 react-app eject 吧,這樣你就會有 webpack 可以做設定

找到你使用的 webpack.js or webpack.base.js or webpack.base.babel.js

修改以下

{
  // 這裡可能有其他的設定,重點是那個 resolve 和 modules 的地方
  ...
  resolve: {
    modules: ['src', 'node_modules'], // <- src 就是告訴 webpack 你要找的位置
  }
  ...
}

修改完之後試試看把上面的路徑修改成這樣


import React from 'react';
import SuperAwesomeApp from 'module1/module1_1/SuperAwesomeApp'
...

還是會出現警告,因為 eslint 還是不知道你有這樣的設定,這時就需要安裝 eslint-import-resolver-webpack 讓 eslint 知道要使用 webpack 來做 resolve path 的動作,當然也可以不跟 webpack 做連結使用 eslint-plugin-import 做 resolve 的設定,只是以後要更改 webpack 可能會忘了要改 eslintrc

yarn add -D eslint-import-resolver-webpack
// .eslintrc
{
  ...
  "settings": {
    "import/resolver": {
      "webpack": {
        "config": "./webpack/webpack.prod.babel.js"
      },
    }
  }
}

這樣 eslint 就不會抱怨 path not resolve 了!

#2 babel 中設定 Alias

雖然這招跟上面有點不太一樣,但可以另外將 path 取名來達到讓路徑變得更明確

像是 src 之後都想要由 app 作為開頭

import React from 'react';
import SuperAwesomeApp from 'app/module1/module1_1/SuperAwesomeApp'
...

就可以使用 babel-plugin-module-resolver 工具來達到

yarn add -D babel-plugin-module-resolver

在 .babelrc 修改以下

{
  ...
  // plugins 的地方新增
  "plugins":[
    "@babel/plugin-syntax-dynamic-import", // 可忽略這個

    ["module-resolver", { // array 中有兩個項目
      "alias": {
        "app": "./src",
      }
    }]
  ],
}

在 .eslintrc 中修改

{
  ...
  "settings": {
    "import/resolver": {
      "babel-module": {},
    }
  }
}

以上兩種方法可以獨立運行,或者一起並行

VSCode 設定

另外在 vscode 中想要能使用 goto definition 功能可以在 root 路徑中加上 jsconfig.json


{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      // 必須手動調整路徑
      "src/*": [
        "./src/*"
      ],
      "app/*": [
        "./src/*"
      ]
    }
  }
}

這樣就大功告成了!

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *