我的 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，子路由的内容会自动的替换掉它，从而达到二级，三级等多级路由嵌套的效果。

目前已完成组件：

结束

已经项目只有自己一个人在做，组件的所有可能出现的状态，情况都得自己考虑，所以难免会有一些组件内的情况没有考虑全，而且，现在因为仅仅是起步阶段，组件量比较少，逻辑都是组件内部，还没有系统的数据交互逻辑出现，所以目前还没有使用redux来管理state。

虽然项目才开始没多久，但是确确实实的学到了很多东西，例如webpack的一系列的辅助效果，react-router的路由机制,es6的语法糖,react的语法糖及内部的状态维护等等，获益匪浅，我相信这样持续下去，会学到更多的东西，虽然期间会踩到很多很多的坑。