个人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的语法糖及内部的状态维护等等，获益匪浅，我相信这样持续下去，会学到更多的东西，虽然期间会踩到不少不少的坑。