日常開(kāi)發(fā)中，我們會(huì)常常把一些功能提取出來(lái)，包裝成一個(gè)公共模塊或者組件，供不同地方使用，但是隨著項(xiàng)目不斷變大，項(xiàng)目目錄不斷變深，我們引用公共組件的路徑越來(lái)越長(zhǎng)！

例如：引用一個(gè)公共模塊

import Menu from '../../../../../components/Menu'; // 這里路徑太深，很容易寫(xiě)錯(cuò)

我們?cè)撛趺磧?yōu)化尼？

解決方案1：使用webpack的resolve.alias屬性

先配置webpack

module.exports = {  ...  resolve: {    alias: {      "@commModule": path.resolve(__dirname, "src/components/")    }  }  ...};

引用Menu模塊

import Menu from '@commModule/Menu';

解決方案2：babel-plugin-module-resolver

配置.babelrc

{  "plugins": [    ["module-resolver", {      "alias": {        "@commMdule": "./src/components"      }    }]  ]}

引用Menu模塊

import Menu from '@commModule/Menu';

總結(jié)

或許這只是一個(gè)小優(yōu)化，但是在實(shí)際場(chǎng)景中，能夠大大的降低我們的維護(hù)成本，提高我們的生產(chǎn)效率！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯(cuò)新站長(zhǎng)站。