glob 在webpack中的使用。

glob 在webpack中對文件的路徑處理很是之方便，好比當搭建多頁面應用時就可使用glob對頁面須要打包文件的路徑進行很好的處理。

官方文檔地址 ： https://www.npmjs.com/package/glob 

我沒有找到中文文檔地址。通過一段時間的學習，本着互聯網分享精神。我現將我學習思路以及想法記錄以下，分享給你們，但願對你們有所幫助。

本文章 所有案例源碼：http://pan.baidu.com/s/1b9QB6I

安裝

npm install glob -save-dev  

目錄結構

 

使用

　　在webpac.config.js中引入glob

　var glob = require("glob")

 　　glob方法能夠傳入三個參數。

　　一、須要進行匹配的文件的路徑（有點相似於正則表達式，可是比那個要簡單的多。）。

　　二、option可選項，也能夠不填寫。

　　三、回調函數，回調函數內部能夠返回兩個參數，一個是匹配成功後的結果會返回一個數組，若是沒有匹配上不會報錯會返回一個空數組，一個是失敗後的結果。

　　示例代碼

glob("**/*.js", options, function (er, files) {
　　console.log(files)
})

 　　下列字符在路徑部分使用時具備特殊的特殊意義

　　一、* ：匹配單個路徑部分中的0個或多個字符。

　　二、?：匹配路徑中某部分1個字符。

　　三、[...] ：匹配一個字符的範圍，相似於一個正則表達式的範圍。若是範圍的第一個字符是！或者，它匹配任何不在範圍內的字符。

　　四、!(模式1|模式2|模式3)：匹配與所提供的任何模式不匹配的任何內容。和正則表達式的!同樣。

　　五、?(模式1|模式2|模式3)：匹配所提供的模式的零或一個事件。

　　六、+(模式1|模式2|模式3)：匹配所提供的模式的一個或多個事件。

 　  七、*(a|b|c) ：匹配所提供的模式的零個或多個事件。

　　八、@(pattern|pat*|pat?erN)：匹配所提供的模式之一。

　　九、**：若是**在一個路徑的部分，他會匹配零個或多個目錄和子目錄中搜索匹配。

 　　*和**的使用方法

　　注意這裏也用到了**，這段匹配模式表明的是src/components/**（下因此的文件夾）/*.js（文件名包含.js的文件路徑）

glob("./src/components/**/*.js", function (er, files) {
    console.log(files);
    return files
});
// [ './src/components/index/index.js',
//     './src/components/news/n.js',
//     './src/components/news/news.js' ]

 　　？的使用方法

　　　注意？匹配的是一個任意字符。

glob("./src/components/**/?.js", function (er, files) {
    console.log(files);
    return files
});
//[ './src/components/news/n.js' ]

　　固然也能夠寫多個？

glob("./src/components/**/????.js", function (er, files) {
    console.log(files);
    return files
});
// [ './src/components/news/news.js' ]

　　[...]的使用方法

　　[...]內能夠寫入須要匹配的組合字符例如：案例中會匹配 indea.js，indeb.js.....indez.js，固然也可單獨制定，例如"./src/components/**/inde[x,k].js"

glob("./src/components/**/inde[a-z].js", function (er, files) {
    console.log(files)
})
//[ './src/components/index/index.js' ]

 

　　!（）的使用方法，理解爲反的意思，其實這個沒什麼說的， 稍微懂點js的都會。和運算表達式中的！同樣。

　　案例中的意思是不要n.js 不要index.js，因此就只剩下new.js了。

glob("./src/components/**/!(n|index).js", function (er, files) {
    console.log(files)
})
// [ './src/components/news/news.js' ] 

 　　?（）的使用方法

glob("./src/components/**/?(news|index|n).js", function (er, files) {
    console.log(files)
});
// [ './src/components/index/index.js',
//     './src/components/news/n.js',
//     './src/components/news/news.js' ]

 

 　　+（）的使用方法

　　本案例中會匹配in.js，news.js，dex.js，innews.js，index.js，newsdex.js 他會先匹配自身是否會匹配上，而後在和其餘模式組合在進行匹配。

glob("./src/components/**/+(in|news|dex).js", function (er, files) {
    console.log(files)
});
// [ './src/components/index/index.js',
//     './src/components/news/news.js' ]

 

　　@（）的使用方法

　　他會完整匹配備選模式中的其中一個，只要有一個模式匹配上就會被匹配

glob("./src/components/**/@(index|n|news).js", function (er, files) {
    console.log(files)
});
// [ './src/components/index/index.js',
//     './src/components/news/n.js',
//     './src/components/news/news.js' ]

 使用同步語法實現以上案例

在上述案例中使用的都是異步請求，調用回調獲得結果，其實glob也提供了同步返回結果的API ，在這裏我只列舉一個。

let pattern = './src/components/**/@(index|n|news).js';
console.log(glob.sync(pattern));
// [ './src/components/index/index.js',
//     './src/components/news/n.js',
//     './src/components/news/news.js' ]