webpack公共組件引用路徑簡(jiǎn)化小技巧
更新時(shí)間：2018年06月15日 09:18:14 作者：Nine
日常開(kāi)發(fā)中，我們會(huì)常常把一些功能提取出來(lái)，包裝成一個(gè)公共模塊或者組件.這篇文章主要介紹了webpack公共組件引用路徑簡(jiǎn)化小技巧,非常具有實(shí)用價(jià)值，需要的朋友可以參考下
日常開(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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js/jquery遍歷對(duì)象和數(shù)組的方法分析【forEach，map與each方法】
這篇文章主要介紹了js/jquery遍歷對(duì)象和數(shù)組的方法,結(jié)合實(shí)例形式分析了數(shù)組遍歷的forEach，map與each方法常見(jiàn)使用技巧,需要的朋友可以參考下2019-02-02
uni-app應(yīng)用配置manifest.json最全最詳細(xì)配置
這篇文章主要給大家介紹了關(guān)于uni-app應(yīng)用配置manifest.json最全最詳細(xì)配置,manifest.json文件是UniApp開(kāi)發(fā)中用來(lái)配置應(yīng)用信息的重要文件,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
這篇文章主要介紹了JavaScript中使用數(shù)組方法匯總的相關(guān)資料,需要的朋友可以參考下2016-02-02
根據(jù)當(dāng)前時(shí)間在jsp頁(yè)面上顯示上午或下午
這篇文章主要介紹了根據(jù)當(dāng)前時(shí)間不同在jsp頁(yè)面上顯示上午或下午,需要的朋友可以參考下2014-08-08
這篇文章主要介紹了JavaScript中的繼承方式詳解,本文講解了js繼承的概念、原型式繼承與類(lèi)式繼承、原型鏈繼承、類(lèi)式繼承、組合繼承、原型式繼承等內(nèi)容,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了移動(dòng)端手指放大縮小插件與js源碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
javascript中數(shù)組（Array)對(duì)象和字符串（String)對(duì)象的常用方法總結(jié)
這篇文章主要介紹了javascript中數(shù)組（Array)對(duì)象和字符串（String)對(duì)象的常用方法,結(jié)合實(shí)例形式總結(jié)分析了javascript中關(guān)于數(shù)組和字符串的常用函數(shù)與使用技巧,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了PHPExcel中的一些常用方法匯總,本文直接給出操作代碼實(shí)例,代碼中對(duì)常用方法給出了注釋,需要的朋友可以參考下2015-01-01
使用js獲取url中的參數(shù)并返回一個(gè)對(duì)象方式
這篇文章主要介紹了使用js獲取url中的參數(shù)并返回一個(gè)對(duì)象方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
JavaScript 題型問(wèn)答有答案參考，都是一些開(kāi)發(fā)中容易碰到的問(wèn)題。2010-02-02