日常開發中，我們會常常把一些功能提取出來，包裝成一個公共模塊或者組件，供不同地方使用，但是隨著項目不斷變大，項目目錄不斷變深，我們引用公共組件的路徑越來越長！
例如：引用一個公共模塊
import Menu from '../../../../../components/Menu'; // 這里路徑太深，很容易寫錯
我們該怎么優化尼？
解決方案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';
總結
或許這只是一個小優化，但是在實際場景中，能夠大大的降低我們的維護成本，提高我們的生產效率！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
