Redux+Flux+webpack+Babel如何整合開發

這篇文章主要為大家展示了“Redux+Flux+webpack+Babel如何整合開發”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“Redux+Flux+webpack+Babel如何整合開發”這篇文章吧。

一、現代前端開發

A.ES6——新一代的JavaScript標準

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

2.函數：

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

• 在對象方法的嵌套函數中，this的作用域指向global對象，而箭頭函數沒有這個問題

• 函數增加默認參數功能

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

3.展開操作符：Rest參數就是展開操作符，允許一個表達式在某處展開

4.模板字符串：`My name is ${name}`，使用`符號

5.解構賦值：

• 類似于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語法糖，只是原來原型鏈方式的一種語法糖

7.模塊

• 使用import和export關鍵字完成模塊的導入和導出

B.使用Babel

1.Babel可以提前使用語言新特性，是一種多用途的js編譯器，把最新版本的js編譯成當下可以執行的版本

2.核心概念是通過一系列的plugin來管理編譯規則，通過不同的plugin，不僅可以編譯ES6代碼，還可以編譯React JSX語法或者是CoffeeScript等

C.前端組件化方案

1.模塊是語言層面的，在前端領域我們說的module一般都是指JS module，往往表現為一個單獨的JS文件；前端組件則更多是業務層面的概念，可以看成是一個可獨立使用的功能實現，往往表現為一個UI部件（并不絕對）

2.JS模塊化方案：

• 全局變量+命名空間(namespace)：一般通過簡單的自執行函數實現局部作用域，避免污染全局作用域（jQuery）

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

• ES6模塊

3.前端組件化方案：

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

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

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

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

D.輔助工具

1.包管理器：npm

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

• package.json：dependencies，在生產環境中需要依賴的包（—save）；devDependencies，僅在開發測試環節中需要依賴的包（—save-dev）；

2.任務流工具（Task Runner）：Grunt和Gulp

• Grunt，使用插件機制和Gruntfile.js實現了多任務配置、組合和運行（npm install grunt-cli -g）

• Glup，吸取了Grunt的優點，通過流的概念來簡化多個任務之間的配置和輸出，讓任務更加簡潔和易于上手（npm install glup-cli -g）

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

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

二、webpack

A.webpack的特點與優勢

1.RequireJS的特點：

• 對CommonJS規范（Node.js模塊所采用的規范）的模塊代碼進行的轉換與包裝

• 對很多Node.js的標準package進行了瀏覽器端的適配，只要是遵循CommonJS規范的JavaScript模塊，即使是純前端代碼，也可以使用它進行打包

2.webpack的特色

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

• 智能的靜態分析：支持包含變量的簡單require表達式

• 模塊熱替換（Hot Module Replacement）：使得在修改完某一模塊后無須刷新頁面，即可動態將受影響的模塊替換為新的模塊，在后續的執行中使用新的模塊邏輯，通過—hot啟動webpack-dev-server即可

B.基于webpack進行開發

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

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

• 提供了讓這些模塊有序、正常執行的環境

2.loader是作用于應用中資源文件的轉換行為。它們 是函數（運行在Node.js環境中），接收資源文件的源代碼作為參數，并返回新的代碼

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

4.plugin的存在可以看成是為了實現那些loader實現不了或不適合在loader中實現的功能，如自動生成項目的HTML頁面（HtmlWebpackPlugin）、向構建過程中注入環境變量（EnvironmentPlugin）、向塊（chunk）的結果文件中添加注釋信息（BannerPlugin）等

5.webpack -w，實時構建，熱替換：webpack-dev-server

三、初識React

1.三大特點：

• 組件：React的一切都是基于組件的，唯一要關心的就是構建組件。組件有著良好的封裝性，讓代碼的利用、測試和分離都變得更加簡單

• JSX：一種直接把HTML嵌套在JS中的寫法，被稱為JSX。它可以定義類似HTML一樣簡潔的樹狀結構，結合了js和HTML的優點，可以像平常一樣使用HTML，也可以在里面嵌套js語法，在瀏覽器中不能直接使用這種格式，需要添加JSX編譯器

• Virtual DOM：在React中，開發者不太需要操作真正的DOM節點，每個React組件都是用Virtual DOM渲染的，它是一種對于HTML DOM節點的抽象描述

A.使用React與傳統前端開發的比較

1.React會使用diff，計算出變化的部分，再將變化的部分作用到真實的DOM上，實現最終頁面的更新

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

B.JSX

1.JSX類似一種語法糖，把標簽類型的寫法轉換成React提供的一個用來創建ReactElement的方法

2.HTML類型的標簽第一個字母用小寫來表示，React組件標簽第一個字母用大寫來表示

3.當遇到傳入的屬性是{}表達式時，里面的代碼會被當作JS代碼處理；在JSX中，遇到標簽就解釋成組件或者HTML標簽，遇到{}就解釋為JS代碼來執行

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

5.使用擴散操作符（...）可以進行屬性擴散，需要注意參數順序

6.使用Babel編譯JSX

C.React+webpack開發環境

*webpack2，沒有preLoaders了，使用rules，另外eslint的airbnb報錯

D.組件

1.組件是React的基石，所有的React應用程序都是基于組件的

2.state是組件內部的屬性，組件本身是一個狀態機，它可以在constructor中通過this.state直接定義它的值，然后根據這引起值來渲染不同的UI

3.組件生命周期

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

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

• 組件卸載：componentWillUnmount在組件被卸載和銷毀之前調用

4.state設計原則：盡量讓大多數的組件都是無狀態的，應該盡量把狀態分離在一些特定的組件中，來降低組件的復雜程度；state中應該包含組件的事件回調函數可能引發UI更新的這類數據；不應該包含在state中的數據：可以由state計算得出的數據；組件；props中的數據

5.節點上設置一個ref屬性，然后通過this.refs.name獲得對應的DOM結構

E.Virtual DOM

1.Virtual DOM是獨立React所存在的，只不過React在渲染的時候采用了這個技術來提高效率

2.ReactElement是一種輕量級的、無狀態的、不可改變的、DOM元素的虛擬表述，其實就是用一個JS對象來表述DOM元素而已，將ReactElement插入真正的DOM中，可以調用ReactDOM的render方法

四、實踐React

1.state的設計原則：盡量簡化數據，遵循DRY(Don’t Repeat Yourself)的原則

2.通用測試工具：Mocha、Chai

五、Flux架構及其實現

1.Flux是Facebook官方提出的一套前端應用架構模式，核心概念就是單向數據流

2.傳統MVC是雙向數據流，單向數據流是Action->Dispatcher->Store->View

3.Flux優缺點：會增加代碼量，引入了大量的概念和文件，帶來了清晰的數據流，合理地把數據和組件的state分離，保持了清晰的邏輯，數據流動更加明了，提供可預測的狀態，避免了多向數據流動帶來的混亂和維護困難

4.Redux三大定律：單一數據源、state是只讀的、使用純函數執行修改

六、使用Redux

1.Redux著眼于對狀態整體的維護，而不會產生出具體變去的部分，React是一個由狀態整體出來界面整體的view層實現，非常適合Redux實現

2.當我們說如何使用Redux時，說的其實是如何獲取并使用store的內容（狀態數據），以及創建并觸發action的過程

3.Redux的特點是單一數據源，即整個應用的狀態信息都保存在一個store中，因而需要由store將數據從React組件樹的根節點傳入

七、React+Redux進階

1.反而模式（anti-pattern或antipattern）指的是在實踐中明顯出現但又低效或是有待優化的設計械，是用來解決問題的帶有共同性的不良方法

2.優化原則：避免過早優化、著眼瓶頸；在優化React時，絕大部分的優化空間在于避免不必要的render—即Virtual DOM節點的生成

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