個人react組件化開發道路(一) 一臉懵比的踩坑中

    前言

           由於先前作過一個使用阿里的ant design的項目，可是因爲ant design中有不少組件還遺留着坑，問題是這些坑，還找不到解決的方法(或者我太low，方法可能有，只是我沒找到)，既然解決不了，那用起來確定就會很難受，只能想各類方法來解決這些，從而就致使出現了一些爛代碼，好吧，我也被我本身給噁心到了，後來想着，看看能不能本身開發出一套組件來(忽然以爲那時候的想法好宏偉)，這樣，什麼坑徹底操縱在本身手裏，多爽，因而就有了如今的這個項目：https://git.oschina.net/meichao/React-webpack   好吧，廢話太多，直入主題吧

    目標

           開發出一套組件，目前主要是用於PC端，後期將完善到移動端，由於還要對組件有API等介紹，因此須要配套網站。

    技術需求

           react，node，webpack，react-router，es6，react-redux(目前還未引入)

    Webpack

            

    這是個人webpack的配置內容

        1：extract-text-webpack-plugin：用於把css樣式加到相應的css文件中，由於先前沒有加的時候，css樣式所有寫在html頁面裏面，實在是忍受不了

      2：entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/routes')]     入口文件地址，./app/routes，routes文件時個jsx格式的，這裏不須要加是由於在resolve裏面進行了設置，會進行後綴名的自動補全

        3： plugins:    webpack.optimize.UglifyJsPlugin()  用於代碼壓縮

                              webpack.HotModuleReplacementPlugin()  熱替換，當你在代碼中有修改的時候，頁面上的內容會自動更新，而無需你手動去刷新頁面

                        webpack.optimize.CommonsChunkPlugin('common.js')  把全部入口節點的公共代碼提取出來，生成一個common.js文件中(注意，若是沒有在plugins中設置HtmlWebpackPlugin的話，須要在手動去建立common.js文件，css亦是如此，而後再index.html文件中去引入)

                            ExtractTextPlugin("[name].css")  將css代碼抽出來到相應的css文件中，和js文件同樣，也須要手動建立相應的css文件

                            

                                設置了模板文件和目標文件，inject的做用是將css文件和js文件插入到body的底部去，hash:true，是在css和js文件後面加hash值，解決了緩存問題(若是使用了HtmlWebpackPlugin，相應的css文件和js文件會自動生成，而無需咱們手動去建立)，具體頁面效果：

            

            由此看到，生成了相應的css文件和js文件，而且在文件後面會有一串hash值，這就是webpack配置裏面作到的一系列效果。

    組件集成

            1：

            組件的文件目錄以下：

                                                

        將通用化組件放到common文件夾下面，其他組件則放在components下面，另外，在MConponent.jsx文件中，以下：

                        

            這樣，咱們就既能夠對組件進行單個調用，也能夠統一接口調用，方便管理。

        2：

            組件中用到了iconfont,先前的作法是：在相應的組件裏使用iconfont的對應class,而後在index.html裏面引入iconfont.css，寫到後來發現不對勁，若是把iconfont.css的引入，放到了目標文件(即index.html)裏面，這樣到時候組件的通用性就會變得不好，每一個項目引入的時候，都須要人爲的本身去引入一遍iconfont.css，這是很不科學的，因而就把iconfont.css的引入集成到了jsx文件裏面，可是引入的時候又報了以下錯誤：

                    

            引入eot.svg.woff這些文件出錯，解決的方案只須要在webpack配置項裏面進行以下配置：

                    

            這樣就完美解決了引入格式的問題。

    樣式

             目前寫的樣式是scss(起始是sass語法很不習慣，less沒怎麼看)，配置以下：

                        

            會將scss語法自動編譯成css,autoprefixer會自動補全瀏覽器前綴，省去了不少的麻煩

    路由

            路由配置以下：

                        

            Router裏面的history 暫時使用 hashhistory 進行開發,由於使用 browserHistory 是服務器渲染，頁面刷新時會出現404,hashhistory雖然不會出現404，可是頁面跳轉過程當中url中會出現  」/?_k=h8c26r「這樣的flag，因此hashhistory僅限與開發過程當中，正式上線，會改用 browserHistory。在這裏說下嵌套路由，只須要在Route裏面嵌套Route，而後再相應的頁面裏面進行操做：

                

                使用 this.props.children，子路由的內容會自動的替換掉它，從而達到二級，三級等多級路由嵌套的效果。

    目前已完成組件：

                    1：MButton

                    2：MInput

                    3：MTooltip

                    4：MBackTop

                    3：MIcon

    結束

            已經項目只有本身一我的在作，組件的全部可能出現的狀態，狀況都得本身考慮，因此不免會有一些組件內的狀況沒有考慮全，並且，如今由於僅僅是起步階段，組件量比較少，邏輯都是組件內部，尚未系統的數據交互邏輯出現，因此目前尚未使用redux來管理state。

            雖然項目纔開始沒多久，可是確確實實的學到了不少東西，例如webpack的一系列的輔助效果，react-router的路由機制,es6的語法糖,react的語法糖及內部的狀態維護等等，獲益匪淺，我相信這樣持續下去，會學到更多的東西，雖然期間會踩到不少不少的坑。