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方法可以傳入三個參數。

  1、需要進行匹配的文件的路徑(有點類似於正則表達式,但是比那個要簡單的多。)。

  2、option可選項,也可以不填寫。

  3、回調函數,回調函數內部可以返回兩個參數,一個是匹配成功后的結果會返回一個數組,如果沒有匹配上不會報錯會返回一個空數組,一個是失敗后的結果。

  示例代碼

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

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

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

  2、?:匹配路徑中某部分1個字符。

  3、[...] :匹配一個字符的范圍,類似於一個正則表達式的范圍。如果范圍的第一個字符是!或者,它匹配任何不在范圍內的字符。

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

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

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

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

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

  9、**:如果**在一個路徑的部分,他會匹配零個或多個目錄和子目錄中搜索匹配。

   *和**的使用方法

  注意這里也用到了**,這段匹配模式代表的是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' ]

 

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM