欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

webpack公共組件引用路徑簡化小技巧

 更新時間：2018年06月15日 09:18:14   作者：Nine  
日常開發(fā)中，我們會常常把一些功能提取出來，包裝成一個公共模塊或者組件.這篇文章主要介紹了webpack公共組件引用路徑簡化小技巧,非常具有實(shí)用價值，需要的朋友可以參考下

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

例如：引用一個公共模塊

import Menu from '../../../../../components/Menu'; // 這里路徑太深，很容易寫錯

我們該怎么優(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é)

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論