<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[ding1885的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/ding1885</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; ding1885]]></copyright><item><title><![CDATA[npm源切换]]></title><link>https://blog.youkuaiyun.com/ding1885/article/details/101960622</link><guid>https://blog.youkuaiyun.com/ding1885/article/details/101960622</guid><author>ding1885</author><pubDate>Sun, 29 Sep 2019 11:15:00 +0800</pubDate><description><![CDATA[获取npm源

npm config get registry


切换npm源

npm config set registry https://registry.npmjs.org/


暂时使用npm源

npm --registry http://ires.58corp.com/repository/58npm/ install cheui-reac...]]></description><category></category></item><item><title><![CDATA[移动端穿透问题]]></title><link>https://blog.youkuaiyun.com/ding1885/article/details/101960620</link><guid>https://blog.youkuaiyun.com/ding1885/article/details/101960620</guid><author>ding1885</author><pubDate>Thu, 12 Sep 2019 14:22:00 +0800</pubDate><description><![CDATA[附上完整的解决方案参考链接（http://www.imooc.com/article/283472）
在弹出层加一个父级元素遮罩层，阻止滚动事件，但是问题是遮罩层所有子元素（弹出层）也不能滚动。
方法一：那么平级设置mask，绑定事件-》虽然滚动mask，页面没有穿透滚动问题，但是当弹出层滚动到头继续拉时页面会滚动
方法二：弹出时body设置overflow:hidden，真机上面...]]></description><category></category></item><item><title><![CDATA[let作用域问题]]></title><link>https://blog.youkuaiyun.com/ding1885/article/details/101960618</link><guid>https://blog.youkuaiyun.com/ding1885/article/details/101960618</guid><author>ding1885</author><pubDate>Wed, 11 Sep 2019 10:51:00 +0800</pubDate><description><![CDATA[在使用let定义变量时遇见这样一个错误

 1 async addPageVersion(uuid, param) {
 2          let result = await this.getVersions(uuid, {pageData: param.pageData});
 3          if(result&amp;&amp;result.length) ...]]></description><category></category></item><item><title><![CDATA[react服务端渲染（十一）引入样式&&一些优化]]></title><link>https://blog.youkuaiyun.com/ding1885/article/details/101960616</link><guid>https://blog.youkuaiyun.com/ding1885/article/details/101960616</guid><author>ding1885</author><pubDate>Tue, 20 Aug 2019 17:28:00 +0800</pubDate><description><![CDATA[添加样式修饰 style-loader在服务段渲染找不到window对象 服务端webpack打包使用isomorphic-style-loader

rules: [{
            test: /\.scss?$/,
            use: ['isomorphic-style-loader','css-loader','sass-loader']
...]]></description><category></category></item><item><title><![CDATA[react服务端渲染（十）404&&301页面实现]]></title><link>https://blog.youkuaiyun.com/ding1885/article/details/101960614</link><guid>https://blog.youkuaiyun.com/ding1885/article/details/101960614</guid><author>ding1885</author><pubDate>Mon, 19 Aug 2019 15:13:00 +0800</pubDate><description><![CDATA[服务端发送请求 fetch如何携带cookie？

fetch(url,{
     headers: {
         'Cookie': req.get('Cookie') || ''
     }
})

改写我们的服务端store，在创建的时候传入服务端的req参数，再改写服务端的fetch方法接受req参数

export const getServ...]]></description><category></category></item><item><title><![CDATA[react服务端渲染（八）路由改写]]></title><link>https://blog.youkuaiyun.com/ding1885/article/details/101960612</link><guid>https://blog.youkuaiyun.com/ding1885/article/details/101960612</guid><author>ding1885</author><pubDate>Wed, 07 Aug 2019 18:09:00 +0800</pubDate><description><![CDATA[每一个用户使用不同的store
请求发送axios/fetch，选择使用fetch进行异步请求的发送 在浏览器端可以直接使用fetch发送，无需安装。但是服务端会报error：fetch is not defined，因为fetch()是为浏览器设计的，然后在第三方模块中后端移植到node.js，所以需要安装node-fetch；

import fetch from 'nod...]]></description><category></category></item><item><title><![CDATA[react服务端渲染（九）proxy代理&&多级路由&&数据的脱水和注水]]></title><link>https://blog.youkuaiyun.com/ding1885/article/details/101960610</link><guid>https://blog.youkuaiyun.com/ding1885/article/details/101960610</guid><author>ding1885</author><pubDate>Wed, 07 Aug 2019 17:57:00 +0800</pubDate><description><![CDATA[项目地址：git@github.com:longlongdan/Reactssr.git

服务端渲染之后，客户端会再次渲染，因为我们的客户端创建的store为空。解决办法：在服务端渲染的时候将获取到的数据赋值一个全局变量（注水），客户端创建的store以这个变量的值作为初始值（脱水）。

const Store = createStore(Rducer,window.info...]]></description><category></category></item><item><title><![CDATA[react-router 使用]]></title><link>https://blog.youkuaiyun.com/ding1885/article/details/101960608</link><guid>https://blog.youkuaiyun.com/ding1885/article/details/101960608</guid><author>ding1885</author><pubDate>Mon, 05 Aug 2019 17:58:00 +0800</pubDate><description><![CDATA[react-router&amp;&amp;react-router-dom的区别

//写法一
import {Switch, Route, Router} from 'react-router';
import {BrowserRouter, Link} from 'react-router-dom';

//写法二
import {Swtich, Route, R...]]></description><category></category></item><item><title><![CDATA[react服务端渲染（七）redux添加]]></title><link>https://blog.youkuaiyun.com/ding1885/article/details/101960623</link><guid>https://blog.youkuaiyun.com/ding1885/article/details/101960623</guid><author>ding1885</author><pubDate>Thu, 01 Aug 2019 17:06:00 +0800</pubDate><description><![CDATA[使用，添加一个redux-thunk中间件，支持异步action操作

import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

import Router from '../...]]></description><category></category></item><item><title><![CDATA[react服务端渲染（六）路由]]></title><link>https://blog.youkuaiyun.com/ding1885/article/details/101960606</link><guid>https://blog.youkuaiyun.com/ding1885/article/details/101960606</guid><author>ding1885</author><pubDate>Wed, 31 Jul 2019 15:47:00 +0800</pubDate><description><![CDATA[react-router-dom和react-router的区别：前者基于react-router，提供更多的功能。除了react-router中提供的{ switch，Router， Route }之外，还有{ Link，BrowserRouter，HashRouter，StaticRouter }等，其中Router是一个通用的低阶接口，通常情况下我们的程序只会使用其中一个高阶R...]]></description><category></category></item><item><title><![CDATA[react服务端渲染（五）同构]]></title><link>https://blog.youkuaiyun.com/ding1885/article/details/101960604</link><guid>https://blog.youkuaiyun.com/ding1885/article/details/101960604</guid><author>ding1885</author><pubDate>Wed, 31 Jul 2019 11:07:00 +0800</pubDate><description><![CDATA[在服务端渲染出来的react组件，绑定的click事件没有执行，所以可以在浏览器端再执行一遍绑定事件
同构：同一套react代码在服务端和浏览器端执行两次
我们客户端的代码也得是用webpack进行打包，以js的方式放在服务端返回的html模板
使用express提供的静态文件方法为我们打包的js提供服务
在客户端使用hydrate替代render方法进行渲染，添加...]]></description><category></category></item><item><title><![CDATA[react服务端渲染（四）实现服务端组件渲染与自动重启]]></title><link>https://blog.youkuaiyun.com/ding1885/article/details/101960602</link><guid>https://blog.youkuaiyun.com/ding1885/article/details/101960602</guid><author>ding1885</author><pubDate>Tue, 30 Jul 2019 17:33:00 +0800</pubDate><description><![CDATA[用了webpack的stage-0进行打包所以可以支持使用es6 modules语法

import React from "react"
const Home = () =&gt; {
    return &lt;div&gt;Home1233333&lt;/div&gt;
}
export default Home;


借助react-dom提供的rende...]]></description><category></category></item><item><title><![CDATA[react服务端渲染（三）配置webpack编译打包jsx语法]]></title><link>https://blog.youkuaiyun.com/ding1885/article/details/101960600</link><guid>https://blog.youkuaiyun.com/ding1885/article/details/101960600</guid><author>ding1885</author><pubDate>Tue, 30 Jul 2019 16:06:00 +0800</pubDate><description><![CDATA[const Path = require('path');
const nodeExternals = require('webpack-node-externals'); //针对服务器端，对于require这样的代码进行与客户端不同的处理
module.exports = {
    target: 'node', //针对服务器端，对于require这样的代码进行与客户端...]]></description><category></category></item><item><title><![CDATA[react服务端渲染（二）服务端react组件书写]]></title><link>https://blog.youkuaiyun.com/ding1885/article/details/101960598</link><guid>https://blog.youkuaiyun.com/ding1885/article/details/101960598</guid><author>ding1885</author><pubDate>Tue, 30 Jul 2019 15:53:00 +0800</pubDate><description><![CDATA[react服务端渲染基本流程



创建一个react的基本的组件

import React from 'react';

const Home = () =&gt; {
    return &lt;div&gt;Home&lt;/div&gt;
}

export default Home;


服务端需要下载安装react
注意服务端不支持im...]]></description><category></category></item><item><title><![CDATA[webpack中的代码压缩&&混淆机制]]></title><link>https://blog.youkuaiyun.com/ding1885/article/details/101960596</link><guid>https://blog.youkuaiyun.com/ding1885/article/details/101960596</guid><author>ding1885</author><pubDate>Tue, 30 Jul 2019 11:13:00 +0800</pubDate><description><![CDATA[压缩
删除 Javascript 代码中所有注释、跳格符号、换行符号及无用的空格，缩短变量名称从而压缩 JS 文件大小。并且不同作用域的变量名是可以重复的，类似a,b,c可以反复出现。

混淆
经过编码将变量和函数原命名改为毫无意义的命名，以防止他人窥视和窃取 Javascript 源代码。让我们的代码尽可能的不可读，常见的做法有：分离变量，增加无意义的代码，打乱控制流。
...]]></description><category></category></item><item><title><![CDATA[webpack4的mode配置]]></title><link>https://blog.youkuaiyun.com/ding1885/article/details/101960594</link><guid>https://blog.youkuaiyun.com/ding1885/article/details/101960594</guid><author>ding1885</author><pubDate>Fri, 26 Jul 2019 16:36:00 +0800</pubDate><description><![CDATA[webpack提供一些默认的配置 这个配置可以通过mode来制定
可选production（默认）/ development / none
development配置

// webpack.development.config.js
module.exports = {
+ mode: 'development'
- devtool: 'eval',
- plugi...]]></description><category></category></item><item><title><![CDATA[webpack-dev-server的使用（未完待续）]]></title><link>https://blog.youkuaiyun.com/ding1885/article/details/101960592</link><guid>https://blog.youkuaiyun.com/ding1885/article/details/101960592</guid><author>ding1885</author><pubDate>Wed, 24 Jul 2019 16:29:00 +0800</pubDate><description><![CDATA[webpack可以直接使用webpack-dev-server命令启动
启动参数： --hot热更新。会去检测文件的变化自动打包刷新页面，
使用webpack-dev-server服务器启动时，打包生成的文件在内存中，而使用webpack命令打包生成的bundle.js默认是在dist目录下，页面引用的时候路径不同。
host:启动的ip，可以配置为写死的本机ip地址|127....]]></description><category></category></item><item><title><![CDATA[NODE_ENV&&cross-env的使用]]></title><link>https://blog.youkuaiyun.com/ding1885/article/details/101960590</link><guid>https://blog.youkuaiyun.com/ding1885/article/details/101960590</guid><author>ding1885</author><pubDate>Fri, 19 Jul 2019 13:01:00 +0800</pubDate><description><![CDATA[使用webpack进行打包会有一个全局的变量process.env.NODE_ENV记录我们的打包环境
process是node的一个全局变量代表node进程，process.env代表系统环境
但是process.env里其实是不存在NODE_ENV，它是一个自定义的变量，在webpack里面用作判断生产环境（production）和开发环境（development）的依据
...]]></description><category></category></item><item><title><![CDATA[局部安装的webpack怎么通过npm脚本执行]]></title><link>https://blog.youkuaiyun.com/ding1885/article/details/101960587</link><guid>https://blog.youkuaiyun.com/ding1885/article/details/101960587</guid><author>ding1885</author><pubDate>Fri, 19 Jul 2019 11:20:00 +0800</pubDate><description><![CDATA[局部安装的webpack，通过package.json的script脚本可以执行webpack命令，但是直接执行webpack却显示webpack不存在：是因为npm run新建的这个 Shell，会将当前目录的node_modules/.bin子目录加入PATH变量，执行结束后，再将PATH变量恢复原样。
参考阮一峰对npm脚本原理的解析http://www.ruanyifeng...]]></description><category></category></item><item><title><![CDATA[react]]></title><link>https://blog.youkuaiyun.com/ding1885/article/details/101960586</link><guid>https://blog.youkuaiyun.com/ding1885/article/details/101960586</guid><author>ding1885</author><pubDate>Wed, 17 Jul 2019 10:50:00 +0800</pubDate><description><![CDATA[1.在html里使用js引入react



2.这样写控制台会报错reactUncaught SyntaxError: Unexpected token &lt;
 　　因为无法识别我们的react代码，需要加上type类型text/babel



3.页面并没有渲染上我们的123节点，因为这个type类型浏览器不会直接去执行，需要引入babel来解析执行
...]]></description><category></category></item></channel></rss>