亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

webpack下實(shí)現(xiàn)動(dòng)態(tài)引入文件方法

 更新時(shí)間:2018年02月22日 10:09:02   作者:_小刀  
下面小編就為大家分享一篇webpack下實(shí)現(xiàn)動(dòng)態(tài)引入文件方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

剛開始使用webpack時(shí),可能很多人都會(huì)有過這樣的想法,在require文件時(shí),能不能不寫靜態(tài)的字符串路徑,而是使用一個(gè)更靈活的方式,比如定義一個(gè)變量,根據(jù)具體的運(yùn)行情況來確定需要require哪個(gè)文件!

比如,筆者就遇到了一個(gè)這樣的需求。

當(dāng)時(shí)是使用vue-router開發(fā)一個(gè)管理系統(tǒng),管理系統(tǒng)自身有一個(gè)目錄數(shù)組,而vue-router也需要一個(gè)route配置數(shù)組,而這兩者恰恰是對(duì)應(yīng)關(guān)系的。當(dāng)時(shí)就想,能不能只維護(hù)一個(gè)目錄數(shù)組,然后動(dòng)態(tài)的生成route數(shù)組呢?

于是我實(shí)現(xiàn)了一個(gè)小demo,如下:

// directory
let dir = [
 {
 name: 'a',
 path: '/a',
 componentPath: './a.vue'
 },
 { 
 ...
 }
];
let route = [];
for (let i = 0; i < dir.length; ++i) {
 let item = dir[i];
 route.push({
 path: item.path,
 component: r => require.ensure([], () => r(require(item.componentPath)), 'demo')
 });
}

大致如上,當(dāng)時(shí)沒留源碼,大概手寫個(gè)例子,忽略一些可能的語法錯(cuò)誤。

當(dāng)使用這段代碼運(yùn)行的時(shí)候,就開始報(bào)錯(cuò)了:Critical dependencies。

在查了一些資料后,我大致明白了webpack的運(yùn)行機(jī)制,也明白了一個(gè)事實(shí),那就是:使用webpack動(dòng)態(tài)require文件是不可能實(shí)現(xiàn)的。

要知道,webpack是一個(gè)打包工具,它運(yùn)行的時(shí)機(jī)屬于預(yù)編譯,而我們的想法呢,要在運(yùn)行時(shí)才能確定到底要require哪些文件,這顯然是不行的,因?yàn)檫@樣,webpack不知道該把哪些包打包起來,結(jié)果就是那些文件都沒有被打包進(jìn)去,那么require也肯定require不到啊。

明白了這個(gè)機(jī)制,我們就應(yīng)該確定直接傳遞path來動(dòng)態(tài)注冊(cè)route是一種不可能實(shí)現(xiàn)的方案。

那么如果又想實(shí)現(xiàn)動(dòng)態(tài)引入文件,怎么辦呢?我們可以考慮一些曲線救國的方案。

1. 預(yù)編譯階段確定require路徑。

我們之所以使用動(dòng)態(tài)的變量來存儲(chǔ)路徑字符串,無非是想要程序替我們執(zhí)行一些動(dòng)作,比如拼接字符串等等。那么很多情況下這些程序在運(yùn)行時(shí)執(zhí)行和在預(yù)編譯時(shí)執(zhí)行是一樣效果的。比如我們上面的例子,就是不想手動(dòng)去維護(hù)兩張表。那么我們可以在打包的時(shí)候,執(zhí)行讀寫文件,來動(dòng)態(tài)執(zhí)行解析操作,并將解析得到的route數(shù)組寫入指定的文件。這樣不就實(shí)現(xiàn)了目標(biāo)嗎?

2.直接傳遞component對(duì)象呢?比如下面的實(shí)現(xiàn)方式:

// directory
let dir = [
 {
 name: 'a',
 path: '/a',
 component: r => require.ensure([], () => r(require('./a.vue')), 'demo')
 
 },
 { 
 ...
 }
];
let route = [];
for (let i = 0; i < dir.length; ++i) {
 let item = dir[i];
 route.push({
 path: item.path,
 component: item.component
 });
}

這種方案主要針對(duì)我們的例子,當(dāng)然對(duì)其他情況也能給一個(gè)啟發(fā)作用。

不過說來說去,這都是委曲求全的方案,我們必須明白一點(diǎn),那就是在預(yù)編譯階段,webpack必須明確知道該引入哪些文件,否則什么方案都是不可行的。

順便一提,網(wǎng)上還有說法require(path),只要path不是純變量,比如require('./root/' + path),這樣組合一下就行?我在這里require.ensure函數(shù)中嘗試過,不行。也許是我使用方式不對(duì)吧。

再一提,傳遞component對(duì)象時(shí),好像在跨文件時(shí)會(huì)有點(diǎn)問題,反正我是將目錄數(shù)組和route數(shù)組以及解析過程寫在一個(gè)文件的。也許是使用相對(duì)路徑在不同文件中解析的問題,使用的時(shí)候需要注意下。

以上這篇webpack下實(shí)現(xiàn)動(dòng)態(tài)引入文件方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • 原生JS實(shí)現(xiàn)幻燈片

    原生JS實(shí)現(xiàn)幻燈片

    本文主要介紹了原生JS實(shí)現(xiàn)幻燈片的示例代碼,具有很好的參考價(jià)值,下面跟著小編一起來看下吧
    2017-02-02
  • element-ui?對(duì)話框dialog使用echarts報(bào)錯(cuò)'dom沒有獲取到'的問題

    element-ui?對(duì)話框dialog使用echarts報(bào)錯(cuò)'dom沒有獲取到'的問題

    這篇文章主要介紹了element-ui?對(duì)話框dialog里使用echarts,報(bào)錯(cuò)'dom沒有獲取到'的問題,在這個(gè)事件里邊進(jìn)行echarts的初始化,執(zhí)行數(shù)據(jù),本文結(jié)合實(shí)例代碼給大家詳細(xì)講解,需要的朋友可以參考下
    2022-11-11
  • 如何將HTML字符轉(zhuǎn)換為DOM節(jié)點(diǎn)并動(dòng)態(tài)添加到文檔中詳解

    如何將HTML字符轉(zhuǎn)換為DOM節(jié)點(diǎn)并動(dòng)態(tài)添加到文檔中詳解

    這篇文章主要給大家介紹了關(guān)于如何將HTML字符轉(zhuǎn)換為DOM節(jié)點(diǎn)并動(dòng)態(tài)添加到文檔中的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起看看吧
    2018-08-08
  • JS獲取表格內(nèi)指定單元格html內(nèi)容的方法

    JS獲取表格內(nèi)指定單元格html內(nèi)容的方法

    這篇文章主要介紹了JS獲取表格內(nèi)指定單元格html內(nèi)容的方法,涉及javascript中innerHTML屬性的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-03-03
  • jQuery拖拽 & 彈出層 介紹與示例

    jQuery拖拽 & 彈出層 介紹與示例

    這篇文章主要介紹了jQuery拖拽 & 彈出層,有需要的朋友可以參考一下
    2013-12-12
  • 怎樣用JS模擬實(shí)現(xiàn)枚舉

    怎樣用JS模擬實(shí)現(xiàn)枚舉

    這篇文章主要介紹了怎樣用JS模擬實(shí)現(xiàn)枚舉,對(duì)枚舉感興趣的同學(xué),可以實(shí)驗(yàn)一下
    2021-04-04
  • 最新評(píng)論