先上 #### 预览地址
** 知识要点:**
[ul]
[li] 异步验证, 服务器验证账号, 昵称 [/li]
[li]E-mail 与昵称皆可登录, 自动登录 [/li]
[li] 列表最多显示 40 个 LI 标签 (4 页, 每页 10 条)[/li]
[li] 可删除自己发布的 [/li]
[li] 防反复刷数据措施, 下拉无数据后, 再过 5 分钟后才能重新请求数据. 频繁点赞和取消. 表单提交失败后, 未修改不能提交 (刷新页面不在此控制内)[/li]
[li] 只有登录才能发表 [/li]
[/ul]
其中, 遇到了 php 本地版本和线上版本不一致, 所造成的一些小问题.
**webpack 配置文件遇到的问题:**
[ul]
[li]
CSS 文件目录得和生成的一致, 不然容易造成 css 里面引用的 font 文件或图片文件的相对路径不一致.
即使目录结构一致, webpack-dev-server(下称 devServer) 和 webpack 生成的路径也不一致, 这表现为.
[ul]
[li]
当 extract-text-webpack-plugin(下称 extract) 配置为 new ExtractTextWebpackPlugin("css/style.css"), // 注: 因为 css 想单独放一个文件夹 (放根目录下无此问题)
(假如 style.css 内有引用 iconfont.css 文件, 为 url(../fonts/iconfont.woff), 相当目录, 引用根目录下的 fonts 内的文件)
而 file-loader 配置为 user:{loader:"file-loader",options:{name:"fonts/[name].[ext]}} 时,
devServer 和 webpack 都会在 build 根目录下生成 fonts/iconfont.woff,
但生成的 style.css 内引用文件路径为 css/fonts/iconfont.woff (即 extract 中的路径 css 加 flie-loader 中的路径, 调试了 file-loader 的 useRelativePath 或 publicPath 或 output, 或两两结合, 都无法实现, file-loader 文档也说得很简单, 没什么价值).
[/li]
[li]
结合以上未实现方法, 因为多了个 css 目录, 看 extract 文档, 调试了用了该配置
- new ExtractTextWebpackPlugin({filename: function(getPath){
- return "css/"+getPath('[name].[hash].css');
- }})
这样, style.css 也实现放在 css 目录中了,
但 style.css 中的 iconfont.woff 路径却为 url(fonts/iconfont.woff) , 应该是上一级的 fonts 目录中, 这又出现引用错误了.
设 file-loader 的 name:"../fonts/[name].[ext]" 吧, style.css 中的路径是对了, 可 iconfont.woff 生成的目录又不在 build 下了, 而是跟 build 平级了, 又引用出错了...
[/li]
[li]
最后, 把 file-loader 的几个参数试了一遍, 得出结果, publicPath 为发布的路径, 如果设 publicPath 又设 output, 那就是 publicPath+output+name... 晕...
最后实现为
- use:{
- loader:"file-loader",
- options:{
- publicPath:"../",
- name:"fonts/[name].[ext]"
- }
- }
加上了 publicPath
- [/li]
- [/ul]
- [/li]
[li]build 时, 由于 webpack 是自己配的, 没用脚手架, 所以提示了个 production 错误.
原来是 react 得加上 process.env.NODE_ENV 初始变量.
webpack 配置文件的 plugins 中加上
- new webpack.DefinePlugin({
- 'process.env':{
- 'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
- }
- })
即可, 其中 NODE_ENV 本人已经在运行环境中写好了. 如不写, 用 JSON.stringify("production") 同样实现.
[/li]
[li]
由于不想用 React 官方提供的路由, 觉得代码太多了啦, 很多东西也用不上, 我就想用一个合适自己的就够啦, 就自己写了个简单的 hash 型的.
其中 url 解析代码都在 Router 中, Route 为一个空的 React 继承类, 因为是空的, 所以什么都不显示, Router 解析完 url, 就显示它相应的 props.children[n].props.component 上. 原理就这些. 同时, 也不喜欢 React 官方路由 Router 下必须只有一个子元素.
[/li]
[li]
接着写登录了, 要保存登录状态, 也是不喜欢 redux, 就觉得它有点绕, 不绕直接用吧, 有些东西又用不上. 就自己写一个模块作登录存储相关数据的吧. 其实就一订阅者模式.
核心代码:
可看出, 也写了一个简单的 ajax 模块.
[/li]
[li] 既然登录都不用 redux 存储了, 列表数据也不用了. 就写了一 store 对象来存就完事了.
- var store={
- list:[]
- };
- export default store;
呃, 就这么多行, 爱死死哪, 够用了!
[/li]
[li] 引用了小部分 antd 的 css 和 js, 虽然是部分, 也不小 [/li]
[li] 表单异步用的是 antd 的表单验证, 而 antd 的表单验证最终是引用 async-validator 模块, 看了看, 不是很喜欢, 有机会自己弄一个来玩玩. 至少我觉得我会弄得容用一点.[/li]
[/ul]
最后总结, 虽然很努力去弄了, 但生成的文件还是不小, 和理想还是有一定差距的. webpack 有点大, 有点复杂, 很多东西都停留在使用层面上, 原理上也懂一些, 具体源码挖不动, 太多了...
生成的 js 有点大, 不太满意...
来源: http://www.qdfuns.com/article/11445/d5c40d21465f3a77b7ce39345a86c426.html