在webpack中實作動態引入文件

下面我就為大家分享一篇webpack下實現動態引入文件方法，具有很好的參考價值，希望對大家有幫助。

剛開始使用webpack時，可能很多人都會有過這樣的想法，在require檔案時，能不能不寫靜態的字串路徑，而是使用一個更靈活的方式，例如定義一個變量，根據具體的運行情況來決定需要require哪個檔案！

例如，筆者就遇到了一個這樣的需求。

當時是使用vue-router開發一個管理系統，管理系統本身有一個目錄數組，而vue-router也需要一個route配置數組，而這兩者恰恰是對應關係的。當時就想，能不能只維護一個目錄數組，然後動態的生成route數組呢？

於是我實作了一個小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)), &#39;demo&#39;)
 });
}

大致如上，當時沒留原始碼，大概手寫個例子，忽略一些可能的語法錯誤。

當使用這段程式碼運行的時候，就開始報錯了：Critical dependencies。

在查了一些資料後，我大致明白了webpack的運作機制，也明白了一個事實，那就是：使用webpack動態require檔是不可能實現的。

要知道，webpack是一個打包工具，它運行的時機屬於預編譯，而我們的想法呢，要在運行時才能確定到底要require哪些文件，這顯然是不行的，因為這樣，webpack不知道該把哪些包打包起來，結果就是那些文件都沒有被打包進去，那麼require也肯定require不到啊。

明白了這個機制，我們就應該確定直接傳遞path來動態註冊route是一種不可能實現的方案。

那麼如果又想實現動態引入文件，該怎麼辦呢？我們可以考慮一些曲線救國的方案。

1. 預編譯階段決定require路徑。

我們之所以使用動態的變數來儲存路徑字串，無非是想要程式替我們執行一些動作，例如拼接字串等等。那麼很多情況下這些程式在執行時執行和在預編譯時執行是一樣效果的。例如我們上面的例子，就是不想手動去維護兩張表。那我們可以在打包的時候，執行讀寫文件，來動態執行解析操作，並將解析得到的route數組寫入指定的文件。這樣不就達成目標了嗎？

2.直接傳遞component物件呢？例如下面的實作方式：

// 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
 });
}

這個方案主要針對我們的例子，當然對其他情況也能給一個啟發作用。

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

順便一提，網路上還有說法require(path)，只要path不是純變量，像是require('./root/' path)，這樣組合一下就行？我在這裡require.ensure函數中嘗試過，不行。也許是我使用方式不對。

再一提，傳遞component物件時，好像在跨檔案時會有點問題，反正我是將目錄數組和route數組以及解析過程寫在一個檔案的。也許是使用相對路徑在不同檔案中解析的問題，使用的時候需要注意。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

利用vue2.0中swiper元件實作輪播（詳細教學）

有關在Vue中使用Compass的具體方法？

如何關閉Vue運算屬性自帶的快取功能，具體步驟有哪些？

以上是在webpack中實作動態引入文件的詳細內容。更多資訊請關注PHP中文網其他相關文章！