一锦积、Promise
1芒帕、Promise簡介
? ? 因為javascript是單線程的,所以很多的事情只能夠使用異步的方式去做好丰介,而異步又會出現(xiàn)執(zhí)行先后順序背蟆,過去使用的是回調(diào)的方式來解決這樣的問題。到了ES6哮幢,官方把Promise制定了標準带膀。
2、Promise的接口列表:
? ? then 橙垢、catch垛叨、resolve、reject柜某、all嗽元、race
? ? 在Promise調(diào)用的function中如果處理的結(jié)果為正常,則調(diào)用resolve函數(shù)喂击,如果異常剂癌,則調(diào)用reject函數(shù)。
? ? 在function中調(diào)用resolve方法時翰绊,程序中就會調(diào)用then函數(shù)佩谷,如果調(diào)用reject方法時,就會調(diào)用catch函數(shù)监嗜。
? ? ? 參數(shù)傳遞方面需要保持一致就可以了琳要,就像我們注冊一個普通的函數(shù)一樣。
? ? ? Promise.all會接收一個promise對象數(shù)組秤茅,等待數(shù)組中的promise函數(shù)全部執(zhí)行完成后稚补,才會執(zhí)行all的.then或者.catch方法。
? ? ? Promise.race會接收一個promise對象數(shù)組框喳,只要數(shù)組中有一個promise函數(shù)執(zhí)行完成后课幕,就會執(zhí)行race的.then或者.catch方法。
二五垮、webpack
1乍惊、入口
webpack將創(chuàng)建所有應(yīng)用程序的依賴關(guān)系圖表。圖表的起點被稱之為入口起點(entry point)放仗。入口起點告訴 webpack 從哪里開始润绎,并遵循著依賴關(guān)系圖表知道要打包什么。可以將應(yīng)用程序的入口起點認為是根上下文或 app 第一個啟動文件莉撇。
類比于requirejs中的入口文件main.js呢蛤,最終使用r.js打包時,都打包在main.js里棍郎。
在webpack中其障,使用webpack配置對象中的entry屬性來定義入口,包括以下多種方式涂佃。
【單個入口(簡寫)語法】
用法:entry: string|Array<string>
[注意]在設(shè)置entry屬性時励翼,如果是當(dāng)前頁面,一定要在屬性值前面設(shè)置為'./'辜荠,否則無法識別
var config = {
? entry: './path/to/my/entry/file.js'
};
2汽抚、出口
在webpack中配置output屬性,需要將它的值設(shè)置為一個對象伯病,并包含filename和path屬性這兩個必選項
filename:編譯文件的文件名殊橙,首選推薦:main.js||bundle.js||index.js
path:對應(yīng)一個絕對路徑,此路徑是希望一次性打包的目錄
//webpack.config.js
var config = {
? output: {
? ? filename: 'bundle.js',
? ? path: '/home/proj/public/assets'
? }
};
3狱从、加載器
webpack的目標是膨蛮,讓webpack聚焦于項目中的所有資源(asset),而瀏覽器不需要關(guān)注考慮這些季研。webpack把每個文件(.css,.html,.scss,.jpg,etc.)都作為模塊處理敞葛。然而webpack只理解JavaScript。webpack loader會將這些文件轉(zhuǎn)換為模塊与涡,而轉(zhuǎn)換后的文件會被添加到依賴圖表中
loader可以使你在require()或"加載"模塊時預(yù)處理文件惹谐。因此,loader類似于其他構(gòu)建工具中“任務(wù)(task)”驼卖,并提供了處理前端構(gòu)建步驟的強大方法
webpack的配置要能識別出(identify)應(yīng)該被對應(yīng)的loader進行轉(zhuǎn)換(transform)的那些文件氨肌。由于進行過文件轉(zhuǎn)換,所以能夠?qū)⒈晦D(zhuǎn)換的文件添加到依賴圖表(并且最終添加到bundle中)(use屬性)
常見的加載器loader包括以下三類:
1)酌畜、編譯相關(guān):babel-loader怎囚、ts-loader
2)、樣式相關(guān):style-loader桥胞、css-loader恳守、less-loader、postcss-loader
3)贩虾、文件相關(guān):file-loader催烘、url-loader
4、插件
插件plugin是wepback的支柱功能缎罢。在使用webpack配置時伊群,webpack自身也構(gòu)建于同樣的插件系統(tǒng)上考杉。插件目的在于解決loader無法實現(xiàn)的其他事情。由于loader僅在每個文件的基礎(chǔ)上執(zhí)行轉(zhuǎn)換舰始,而插件(plugins)最常用于(但不限于)在打包模塊的“compilation”和“chunk”生命周期執(zhí)行操作和自定義功能崇棠,包括打包優(yōu)化壓縮及配置編譯時的變量等功能。webpack的插件系統(tǒng)極其強大和可定制化蔽午。