我的react组件化开发道路(一) 一脸懵比的踩坑中

前端之家收集整理的这篇文章主要介绍了我的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的语法糖及内部的状态维护等等,获益匪浅,我相信这样持续下去,会学到更多的东西,虽然期间会踩到很多很多的坑。

猜你在找的React相关文章