Redux+Flux+webpack+Babel如何整合開(kāi)發(fā)

這篇文章主要為大家展示了“Redux+Flux+webpack+Babel如何整合開(kāi)發(fā)”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Redux+Flux+webpack+Babel如何整合開(kāi)發(fā)”這篇文章吧。

一、現(xiàn)代前端開(kāi)發(fā)

A.ES6——新一代的JavaScript標(biāo)準(zhǔn)

1.const、let關(guān)鍵字：let塊級(jí)作用域，const常量（如果是引用類型，那么可以修改它的屬性）

2.函數(shù)：

• 箭頭函數(shù)：一種更簡(jiǎn)單的函數(shù)聲明方式，可以看作是一種語(yǔ)法糖，永遠(yuǎn)是匿名的，如let add = (a,b)=>a+b

• 在對(duì)象方法的嵌套函數(shù)中，this的作用域指向global對(duì)象，而箭頭函數(shù)沒(méi)有這個(gè)問(wèn)題

• 函數(shù)增加默認(rèn)參數(shù)功能

• Rest參數(shù)：function test(…args){}，表示沒(méi)有指定變量名稱的參數(shù)數(shù)組（arguments是所有參數(shù)的集合），是一個(gè)真正的數(shù)組（arguments不是一個(gè)真正的數(shù)組）

3.展開(kāi)操作符：Rest參數(shù)就是展開(kāi)操作符，允許一個(gè)表達(dá)式在某處展開(kāi)

4.模板字符串：`My name is ${name}`，使用`符號(hào)

5.解構(gòu)賦值：

• 類似于php中的list(a,b)=[]

• let foo = [1,2,3];   let [a,b,c] = foo;

• let baz = {a:1,b:2};   let {a,b} = baz;

6.類：提供了class語(yǔ)法糖，只是原來(lái)原型鏈方式的一種語(yǔ)法糖

7.模塊

• 使用import和export關(guān)鍵字完成模塊的導(dǎo)入和導(dǎo)出

B.使用Babel

1.Babel可以提前使用語(yǔ)言新特性，是一種多用途的js編譯器，把最新版本的js編譯成當(dāng)下可以執(zhí)行的版本

2.核心概念是通過(guò)一系列的plugin來(lái)管理編譯規(guī)則，通過(guò)不同的plugin，不僅可以編譯ES6代碼，還可以編譯React JSX語(yǔ)法或者是CoffeeScript等

C.前端組件化方案

1.模塊是語(yǔ)言層面的，在前端領(lǐng)域我們說(shuō)的module一般都是指JS module，往往表現(xiàn)為一個(gè)單獨(dú)的JS文件；前端組件則更多是業(yè)務(wù)層面的概念，可以看成是一個(gè)可獨(dú)立使用的功能實(shí)現(xiàn)，往往表現(xiàn)為一個(gè)UI部件（并不絕對(duì)）

2.JS模塊化方案：

• 全局變量+命名空間(namespace)：一般通過(guò)簡(jiǎn)單的自執(zhí)行函數(shù)實(shí)現(xiàn)局部作用域，避免污染全局作用域（jQuery）

• AMD&CommonJS：AMD僅需要在全局環(huán)境下定義require與define，通過(guò)文件路徑或文件名定位模塊，模塊實(shí)現(xiàn)中聲明依賴，加載與執(zhí)行均由加載器操作，提供了打包工具自動(dòng)分析依賴并合并；CommonJS不適合瀏覽器環(huán)境，相比AMD更簡(jiǎn)潔，可以方便的實(shí)現(xiàn)前后端代碼共用

• ES6模塊

3.前端組件化方案：

• 基于命名空間的多入口文件組件：基于全局變量+命名空間的模塊化方案，不同資源分別手動(dòng)引入，類似于jQuery的插件

• 基于模塊的多入口文件組件：使用AMD規(guī)范，把自己暴露為一個(gè)模塊

• 單JS入口組件：browserify、webpack等打包工具，允許將一般資源視為JS平等的模塊以致的方式加載進(jìn)來(lái)

• Web Component：尚未確定，支持不夠

D.輔助工具

1.包管理器：npm

• 查看全局的包安裝位置：npm prefix -g

• package.json：dependencies，在生產(chǎn)環(huán)境中需要依賴的包（—save）；devDependencies，僅在開(kāi)發(fā)測(cè)試環(huán)節(jié)中需要依賴的包（—save-dev）；

2.任務(wù)流工具（Task Runner）：Grunt和Gulp

• Grunt，使用插件機(jī)制和Gruntfile.js實(shí)現(xiàn)了多任務(wù)配置、組合和運(yùn)行（npm install grunt-cli -g）

• Glup，吸取了Grunt的優(yōu)點(diǎn)，通過(guò)流的概念來(lái)簡(jiǎn)化多個(gè)任務(wù)之間的配置和輸出，讓任務(wù)更加簡(jiǎn)潔和易于上手（npm install glup-cli -g）

3.模塊打包工具：Bundler、webpack

• Bundler的主要任務(wù)是突破瀏覽器的鴻溝，將各種格式的JS代碼甚至是靜態(tài)文件，進(jìn)行分析、壓縮、合并、打包，最后生成瀏覽器支持的代碼

二、webpack

A.webpack的特點(diǎn)與優(yōu)勢(shì)

1.RequireJS的特點(diǎn)：

• 對(duì)CommonJS規(guī)范（Node.js模塊所采用的規(guī)范）的模塊代碼進(jìn)行的轉(zhuǎn)換與包裝

• 對(duì)很多Node.js的標(biāo)準(zhǔn)package進(jìn)行了瀏覽器端的適配，只要是遵循CommonJS規(guī)范的JavaScript模塊，即使是純前端代碼，也可以使用它進(jìn)行打包

2.webpack的特色

• 代碼拆分（code splitting）方案：可以將應(yīng)用代碼拆分為多個(gè)塊（chunk），每個(gè)塊包含一個(gè)或多個(gè)模塊，塊可以按需被異步加載

• 智能的靜態(tài)分析：支持包含變量的簡(jiǎn)單require表達(dá)式

• 模塊熱替換（Hot Module Replacement）：使得在修改完某一模塊后無(wú)須刷新頁(yè)面，即可動(dòng)態(tài)將受影響的模塊替換為新的模塊，在后續(xù)的執(zhí)行中使用新的模塊邏輯，通過(guò)—hot啟動(dòng)webpack-dev-server即可

B.基于webpack進(jìn)行開(kāi)發(fā)

1.webpack主要做了兩部分工作：

• 分析得到所有必需模塊并合并

• 提供了讓這些模塊有序、正常執(zhí)行的環(huán)境

2.loader是作用于應(yīng)用中資源文件的轉(zhuǎn)換行為。它們 是函數(shù)（運(yùn)行在Node.js環(huán)境中），接收資源文件的源代碼作為參數(shù)，并返回新的代碼

3.使用style-loader、css-loader會(huì)讓樣式代碼延后與js同時(shí)加載，用戶體驗(yàn)不好，可以借助extract-text-webpack-plugin插件，在打包時(shí)將樣式內(nèi)容抽取并輸出到額外的css文件中

4.plugin的存在可以看成是為了實(shí)現(xiàn)那些loader實(shí)現(xiàn)不了或不適合在loader中實(shí)現(xiàn)的功能，如自動(dòng)生成項(xiàng)目的HTML頁(yè)面（HtmlWebpackPlugin）、向構(gòu)建過(guò)程中注入環(huán)境變量（EnvironmentPlugin）、向塊（chunk）的結(jié)果文件中添加注釋信息（BannerPlugin）等

5.webpack -w，實(shí)時(shí)構(gòu)建，熱替換：webpack-dev-server

三、初識(shí)React

1.三大特點(diǎn)：

• 組件：React的一切都是基于組件的，唯一要關(guān)心的就是構(gòu)建組件。組件有著良好的封裝性，讓代碼的利用、測(cè)試和分離都變得更加簡(jiǎn)單

• JSX：一種直接把HTML嵌套在JS中的寫(xiě)法，被稱為JSX。它可以定義類似HTML一樣簡(jiǎn)潔的樹(shù)狀結(jié)構(gòu)，結(jié)合了js和HTML的優(yōu)點(diǎn)，可以像平常一樣使用HTML，也可以在里面嵌套js語(yǔ)法，在瀏覽器中不能直接使用這種格式，需要添加JSX編譯器

• Virtual DOM：在React中，開(kāi)發(fā)者不太需要操作真正的DOM節(jié)點(diǎn)，每個(gè)React組件都是用Virtual DOM渲染的，它是一種對(duì)于HTML DOM節(jié)點(diǎn)的抽象描述

A.使用React與傳統(tǒng)前端開(kāi)發(fā)的比較

1.React會(huì)使用diff，計(jì)算出變化的部分，再將變化的部分作用到真實(shí)的DOM上，實(shí)現(xiàn)最終頁(yè)面的更新

2.React的事件綁定表現(xiàn)為，值為回調(diào)函數(shù)的組件屬性(props)。好處是，綁定事件的過(guò)程自然地變成了界面渲染（render）的一部分，無(wú)須特別處理

B.JSX

1.JSX類似一種語(yǔ)法糖，把標(biāo)簽類型的寫(xiě)法轉(zhuǎn)換成React提供的一個(gè)用來(lái)創(chuàng)建ReactElement的方法

2.HTML類型的標(biāo)簽第一個(gè)字母用小寫(xiě)來(lái)表示，React組件標(biāo)簽第一個(gè)字母用大寫(xiě)來(lái)表示

3.當(dāng)遇到傳入的屬性是{}表達(dá)式時(shí)，里面的代碼會(huì)被當(dāng)作JS代碼處理；在JSX中，遇到標(biāo)簽就解釋成組件或者HTML標(biāo)簽，遇到{}就解釋為JS代碼來(lái)執(zhí)行

4.子組件位置的注釋需要使用{/* … */}

5.使用擴(kuò)散操作符（...）可以進(jìn)行屬性擴(kuò)散，需要注意參數(shù)順序

6.使用Babel編譯JSX

C.React+webpack開(kāi)發(fā)環(huán)境

*webpack2，沒(méi)有preLoaders了，使用rules，另外eslint的airbnb報(bào)錯(cuò)

D.組件

1.組件是React的基石，所有的React應(yīng)用程序都是基于組件的

2.state是組件內(nèi)部的屬性，組件本身是一個(gè)狀態(tài)機(jī)，它可以在constructor中通過(guò)this.state直接定義它的值，然后根據(jù)這引起值來(lái)渲染不同的UI

3.組件生命周期

• 組件首次加載：裝載前調(diào)用（getDefaultProps、getInitialState）、render前（componentWillMount）、render是組件的必要方法，返回一個(gè)ReactElement對(duì)象，裝載完成之后（componentDidMount）

• 組件props更新：componentWillReceiveProps(next)接收到新的props的時(shí)候觸發(fā)，shouldComponentUpdate在重新render之前調(diào)用，componentWillUpdate在render之前被調(diào)用，componentDidUpdate重新渲染完成之后立即調(diào)用

• 組件卸載：componentWillUnmount在組件被卸載和銷毀之前調(diào)用

4.state設(shè)計(jì)原則：盡量讓大多數(shù)的組件都是無(wú)狀態(tài)的，應(yīng)該盡量把狀態(tài)分離在一些特定的組件中，來(lái)降低組件的復(fù)雜程度；state中應(yīng)該包含組件的事件回調(diào)函數(shù)可能引發(fā)UI更新的這類數(shù)據(jù)；不應(yīng)該包含在state中的數(shù)據(jù)：可以由state計(jì)算得出的數(shù)據(jù)；組件；props中的數(shù)據(jù)

5.節(jié)點(diǎn)上設(shè)置一個(gè)ref屬性，然后通過(guò)this.refs.name獲得對(duì)應(yīng)的DOM結(jié)構(gòu)

E.Virtual DOM

1.Virtual DOM是獨(dú)立React所存在的，只不過(guò)React在渲染的時(shí)候采用了這個(gè)技術(shù)來(lái)提高效率

2.ReactElement是一種輕量級(jí)的、無(wú)狀態(tài)的、不可改變的、DOM元素的虛擬表述，其實(shí)就是用一個(gè)JS對(duì)象來(lái)表述DOM元素而已，將ReactElement插入真正的DOM中，可以調(diào)用ReactDOM的render方法

四、實(shí)踐React

1.state的設(shè)計(jì)原則：盡量簡(jiǎn)化數(shù)據(jù)，遵循DRY(Don’t Repeat Yourself)的原則

2.通用測(cè)試工具：Mocha、Chai

五、Flux架構(gòu)及其實(shí)現(xiàn)

1.Flux是Facebook官方提出的一套前端應(yīng)用架構(gòu)模式，核心概念就是單向數(shù)據(jù)流

2.傳統(tǒng)MVC是雙向數(shù)據(jù)流，單向數(shù)據(jù)流是Action->Dispatcher->Store->View

3.Flux優(yōu)缺點(diǎn)：會(huì)增加代碼量，引入了大量的概念和文件，帶來(lái)了清晰的數(shù)據(jù)流，合理地把數(shù)據(jù)和組件的state分離，保持了清晰的邏輯，數(shù)據(jù)流動(dòng)更加明了，提供可預(yù)測(cè)的狀態(tài)，避免了多向數(shù)據(jù)流動(dòng)帶來(lái)的混亂和維護(hù)困難

4.Redux三大定律：?jiǎn)我粩?shù)據(jù)源、state是只讀的、使用純函數(shù)執(zhí)行修改

六、使用Redux

1.Redux著眼于對(duì)狀態(tài)整體的維護(hù)，而不會(huì)產(chǎn)生出具體變?nèi)サ牟糠?，React是一個(gè)由狀態(tài)整體出來(lái)界面整體的view層實(shí)現(xiàn)，非常適合Redux實(shí)現(xiàn)

2.當(dāng)我們說(shuō)如何使用Redux時(shí)，說(shuō)的其實(shí)是如何獲取并使用store的內(nèi)容（狀態(tài)數(shù)據(jù)），以及創(chuàng)建并觸發(fā)action的過(guò)程

3.Redux的特點(diǎn)是單一數(shù)據(jù)源，即整個(gè)應(yīng)用的狀態(tài)信息都保存在一個(gè)store中，因而需要由store將數(shù)據(jù)從React組件樹(shù)的根節(jié)點(diǎn)傳入

七、React+Redux進(jìn)階

1.反而模式（anti-pattern或antipattern）指的是在實(shí)踐中明顯出現(xiàn)但又低效或是有待優(yōu)化的設(shè)計(jì)械，是用來(lái)解決問(wèn)題的帶有共同性的不良方法

2.優(yōu)化原則：避免過(guò)早優(yōu)化、著眼瓶頸；在優(yōu)化React時(shí)，絕大部分的優(yōu)化空間在于避免不必要的render—即Virtual DOM節(jié)點(diǎn)的生成

以上是“Redux+Flux+webpack+Babel如何整合開(kāi)發(fā)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！