webpack動(dòng)態(tài)引入文件的方法

這篇文章給大家分享的是有關(guān)webpack動(dòng)態(tài)引入文件的方法的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

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

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

當(dāng)時(shí)是使用vue-router開(kāi)發(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í)沒(méi)留源碼，大概手寫(xiě)個(gè)例子，忽略一些可能的語(yǔ)法錯(cuò)誤。

當(dāng)使用這段代碼運(yùn)行的時(shí)候，就開(kāi)始報(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不知道該把哪些包打包起來(lái)，結(jié)果就是那些文件都沒(méi)有被打包進(jìn)去，那么require也肯定require不到啊。

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

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

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

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

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

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

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

感謝各位的閱讀！關(guān)于webpack動(dòng)態(tài)引入文件的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！