1、rimraf? 包用法及參數(shù)配置詳細說明? ? ? node包
The?UNIX command?rm -rf?for node.
Install with?npm install rimraf, or just drop rimraf.js somewhere.
這是一個NODE支持跨平臺的刪除命令插件,就像unix系統(tǒng)上的命令：rm -rf,遞歸刪除文件及目錄
?安裝方法見上
在NODE中的使用方法：
rimraf(f, [opts], callback)
在node項目中一般是這樣寫：
const rm = require('rimraf');
rm(f,[opts], callback);
參數(shù)：
f：就是要刪除的文件目錄或文件，這是一個全局模式态贤，如果不想使用全局模式，可以設置后面第二個參數(shù)中的opts.glob為false
opts：配置選項次企，可忽略怯晕，應該是配置第一個搜索目錄及文件的方式的，還待研究
callback：回調(diào)函數(shù)缸棵，默認會傳遞 error 錯誤參數(shù)
示例：rm('/test', {glob:true, silent:false, nosort:true}, error => {
? ? if(error) ｛
? ? //處理錯誤的代碼
????? ? return;
? ｝
? ? //刪除目錄及文件后要做的事情的代碼
});
意思就是：刪除/test文件夾及其下的所有文件舟茶，成功后再處理一些后續(xù)的事情
注意：這個包是依賴glob包的，glob是一個文件匹配包堵第，就是用來根據(jù)指定樣式或正則來匹配搜索文件的吧凉，rimraf能夠匹配到文件 就是通過glob來處理的，glob包的地址https://www.npmjs.com/package/glob
2踏志、ora? 分割器? ?node包
Elegant terminal spinner
可以理解為程序運行的分割器阀捅，簡單說就是提示程序加載的，和layer彈層的layer.loading(),一個道理针余，程序加載完饲鄙，然后layer.close(),看例子容易理解
const ora = require('ora');
const spinner = ora('程序開始加載中...').start();
其它配置項：
ora({
color:red, //顏色? 默認：cyan? ,可選值：black?red?green?yellow?blue?magenta?cyan?white?gray
text: 'the programm is loading...', //加載或者啟動時的文字
frames:['-','+','-']? // 進度顯示
interval:50, //進度動畫時間間隔
});
其它API：
ora.succeed(‘loading success!’) //成功要顯示的 前面有?
ora.fail(‘loading failed!’) //失敗要顯示的??
ora.warn('loading has some info need warn') // 警告信息??
3、chalk? 終端文本格式化包? ? node 包
這個用法很簡單涵紊，主要就是把終端輸出的文本進行格式化傍妒，比如：修改顏色，字體樣式等
如：
const chalk = require('chalk');
chalk.red('這個文字是紅色的')
支持鏈式寫法：chalk.bold.rgb(10, 100, 200)('Hello world!')
4摸柄、opn 打開文件颤练，應用及圖片? ? node包
A better?node-open. Opens stuff like websites, files, executables. Cross-platform.
打開stuff,即打開如瀏覽器，文件驱负，可執(zhí)行的應用程序嗦玖，可跨平臺使用
用法比較簡單：
const opn = require('opn');//?
Opens the image in the default image viewer
用默認的圖片瀏覽器打開圖片
opn('unicorn.png').then(() => {
// image viewer closed
});
// Opens the url in the default browser
在瀏覽器中打開地址
opn('http://sindresorhus.com');
// Specify the app to open in
用指定的應用打開
opn('http://sindresorhus.com', {app: 'firefox'});
// Specify app arguments
opn('http://sindresorhus.com', {app: ['google chrome', '--incognito']});
說明：The app name is platform dependent. Don't hard code it in reusable modules. For example, Chrome is?google chrome?on macOS,?google-chrome?on Linux and?chrome?on Windows.
5、semver? ??版本檢查? node 包
As a node module:? 官方示例：
const?semver?=?require('semver')
semver.valid('1.2.3')?//?'1.2.3'
semver.valid('a.b.c')?//?null
semver.clean('??=v1.2.3???')?//?'1.2.3'
semver.satisfies('1.2.3',?'1.x?||?>=2.5.0?||?5.0.0?-?7.2.3')?//?true
semver.gt('1.2.3',?'9.8.7')?//?false
semver.lt('1.2.3',?'9.8.7')?//?true
6跃脊、shelljs? ?shell命令 node包
主要是能夠運行l(wèi)inux 的shell 命令宇挫，以這種方式就可以和linux命令統(tǒng)一了
官方示例：
var?shell?=?require('shelljs');
if?(!shell.which('git'))?{
??shell.echo('Sorry,?this?script?requires?git');
??shell.exit(1);
}
//?Copy?files?to?release?dir?
shell.rm('-rf',?'out/Release');
shell.cp('-R',?'stuff/',?'out/Release');
//?Replace?macros?in?each?.js?file?
shell.cd('lib');
shell.ls('*.js').forEach(function?(file)?{
??shell.sed('-i',?'BUILD_VERSION',?'v0.1.2',?file);
??shell.sed('-i',?/^.*REMOVE_THIS_LINE.*$/,?'',?file);
??shell.sed('-i',?/.*REPLACE_LINE_WITH_MACRO.*\n/,?shell.cat('macro.js'),?file);
});
shell.cd('..');
//?Run?external?tool?synchronously? ? ?執(zhí)行外部工具命令
if?(shell.exec('git?commit?-am?"Auto-commit"').code?!==?0)?{
??shell.echo('Error:?Git?commit?failed');
??shell.exit(1);
}
//上面是在使用vue的時候常用 的幾個node 包，做個筆記酪术，以便更好的認識
===========================================================================
下面記錄webpack+vue中常用的幾個插件及使用配置說明
1器瘪、DefinePlugin? ? 常量定義插件? ?webpack? 插件
DefinePlugin?允許創(chuàng)建一個在編譯時可以配置的全局常量。這可能會對開發(fā)模式和發(fā)布模式的構(gòu)建允許不同的行為非常有用绘雁。如果在開發(fā)構(gòu)建中橡疼，而不在發(fā)布構(gòu)建中執(zhí)行日志記錄，則可以使用全局常量來決定是否記錄日志庐舟。這就是?DefinePlugin?的用處欣除，設置它，就可以忘記開發(fā)和發(fā)布構(gòu)建的規(guī)則挪略。
上面是從webpack文檔中copy 的解釋历帚，但是看起來像是用百度翻譯過來的文檔滔岳，讀起來很拗口，解釋一下：
這個插件就是定義全局常量的挽牢，如果會PHP的人就容易理解谱煤，類似PHP里面的define()語句，定義了這個常量后卓研，就可以根據(jù)這個常量進行不同的配置趴俘，不同的行為了睹簇！
比如奏赘，最常用的就是根據(jù)不同的環(huán)境來加載不同的配置，本地環(huán)境太惠，加載本地的config, 線上環(huán)境磨淌，加載線上config,? ?再比如：開發(fā)環(huán)境可以記錄錯誤日志，線上環(huán)境就可以不用記錄等等
用法：
new? ? webpack.DefinePlugin({
????PRODUCTION:JSON.stringify(true),
????VERSION:JSON.stringify("5fa3b9"),
????BROWSER_SUPPORTS_HTML5:true,
????TWO:"1+1",
????"typeof window":JSON.stringify("object")
})
上面這個就是定義了4個常量一個?typeof 調(diào)用凿渊，
分別是：PRODUCTION,?VERSION,BROWSER_SUPPORTS_HTML5,TWO,"typeof window"
if ( !PRODUCTION ){
????????const? ? ? config = require('prod.config');
} if ( PRODUCTION ){
????????????const? ? ? config = require('prod.config');
}
說明：
每個傳進?DefinePlugin?的鍵值都是一個標志符或者多個用?.?連接起來的標志符梁只。
如果這個值是一個字符串，它會被當作一個代碼片段來使用埃脏。? 比如：?TWO:"1+1",? ?TWO的值是：2搪锣， 不是'1+1'這個字符串
如果這個值不是字符串，它會被轉(zhuǎn)化為字符串(包括函數(shù))彩掐。PRODUCTION ： true,? ?實際值： 'true',? 字符串
如果這個值是一個對象构舟，它所有的 key 會被同樣的方式定義。? ?相當于克隆
如果在一個 key 前面加了?typeof,它會被定義為 typeof 調(diào)用堵幽。? "typeof window":JSON.stringify("object")? 狗超，相當于：object ： “object"
2、UglifyJS? ? ?js壓縮插件? ?Webpack Plugin
使用方法：
const?UglifyJsPlugin?=?require('uglifyjs-webpack-plugin')
module.exports?=?{
??plugins:?[
????new?UglifyJsPlugin(options)
??]
}
配置項：
options = {
????test：?/\.js($|\?)/i朴下，? //對js文件的正則匹配??
? ??include:?/\/includes/? ? //必須處理的文件目錄
? ??exclude:?/\/excludes/? ? //不能用插件處理的文件目錄
? ??cache:?true? |? 'path/to/cache' ? ?//是否緩存js文件? 努咐，默認緩存目錄：node_modules/.cache/uglifyjs-webpack-plugin,? 或者使用自定義緩存? ??????????????????????????????????????????????????????????????????????目?錄
? ??parallel :?true? |? number? ?//是否并行 處理，加快js優(yōu)化速度殴胧，并行 處理的個數(shù)為cpu的個數(shù)減1渗稍， os.cpus().length - 1.，也可以自定義? ??????????????????????????????????????????????????????number
? ??sourceMap:?true? ? ? //是否使用sourcemap,? 也就是說是否可以定位錯誤的行列团滥，cheap-source-map? ? 不支持這種模式的sourceMap
? ??ie8? :? true \ false? ?//是否支持ie8
? ??ecma:?6,? ?//是否解析? ?es 5 6,7,8,? 直接寫5-8中的一個數(shù)字
??????parse:?{...options},? ?//解析的配置選項竿屹，具體哪些沒有說明，待研究
??????mangle:?{
????????...options,
????????properties:?{
??????????//?mangle?property?options
????????}
??????},
??????output:?{
????????comments:?false,? ? //去掉注釋
????????beautify:?false,? ? //不做代碼美化處理
????????...options? ?//其它選項
??????},
??????compress:?{...options},
??????warnings:?false
}
3惫撰、extract-text-webpack-plugin? ? 文件 分離插件
主要是把文件單獨提取到一個獨立的文件中
