
 @hustcc react-adsense  不支持服务端渲染框架，受 [react-adsense](https://www.npmjs.com/package/react-adsense) 启发写了 react-ssr-adsense

# react-ssr-adsense

react-ssr-adsense is a React-ssr-component for Google AdSense。support [#nextjs](https://nextjs.org/)

[![npm](https://img.shields.io/npm/v/react-ssr-adsense.svg)](https://www.npmjs.com/package/react-ssr-adsense)
[![npm](https://img.shields.io/npm/dm/react-ssr-adsense.svg)](https://www.npmjs.com/package/react-ssr-adsense)
[![npm](https://img.shields.io/npm/l/react-ssr-adsense.svg)](https://www.npmjs.com/package/react-ssr-adsense)

# 1. Install

> **npm install --save react-ssr-adsense**

Before use Google AdSense, you should add the `script` at the end of HTML.

```html
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
```


# 2. Usage

```jsx
import React from 'react';
import AdSense from 'react-ssr-adsense';

// ads with no set-up
<AdSense
  client='ca-pub-7292810486004926'
  slot='7806394673'
/>

// ads with custom format
<AdSense
  client='ca-pub-7292810486004926'
  slot='7806394673'
  style={{ width: 500, height: 300, float: 'left' }}
  format=''
/>

// responsive and native ads
<AdSense
  client='ca-pub-7292810486004926'
  slot='7806394673'
  style={{ display: 'block' }}
  layout='in-article'
  format='fluid'
/>

// auto full width responsive ads
<AdSense
  client='ca-pub-7292810486004926'
  slot='7806394673'
  style={{ display: 'block' }}
  format='auto'
  responsive='true'
  layoutKey='-gw-1+2a-9x+5c'
/>
```


# 3. Props

 - Required props:
   - `client`
   - `slot`
 - Optional props:
   - `className`:
   - `style`:
   - `layout`:
   - `layoutKey`:
   - `format`:
   - `responsive`:


# LICENSE

MIT@[douyacun](https://github.com/douyacun).





昨天成功将google adsense申请下来了，博客时nextjs服务端渲染框架，使用react-adsense不支持服务端渲染，解决以后出了一个react-ssr-adsense

react接入google广告: 支持服务端渲染


最近在研究websocket的路上愈走愈远了，从开始只是搭建聊天室到单机服务如何支持百万连接。现在是在弄epoll的道路上，经历一路坎坷。这里记录一下心路历程。

问题： **epoll这只能运行在linux，有问题没发调试，蛋疼吗？**

首先想到装个docker，运行个centos，然后对着docker又是一顿撸。还是没发调试，

[gdb](/article/60b333ebaf6f8bdee5565d1763302f2a) 也是可以调试go程序的，问题是，这tm一个项目几百个文件都有了，我gdb怎么断点啊，大概的思路就是从函数调用的地方开始入手，这啥时候是个头啊，简单的还行，果断放弃了

[delve](https://github.com/go-delve/delve) dlv其实很不错的，也能像gdb一样支持，对goroutine支持也很完美，问题来了，docker运行的centos，我就是装个dlv, `go get -u github.com/go-delve/delve/cmd/dlv` 装不动，只能心里默默诅咒那个下决定对github限速的人。google我能理解，但是github这个真理解不了。只能走代理了。关于[怎么在centos上使用代理](/linux/centos使用ss代理.md)

**goland配置**

`Run/Edit configurations` 

![](/images/blog/1/golang/assert/delve-goland.png)

**host配置**

docker运行的centos，创建container的时候，指定 `-p 2345:2345` , 把容器的端口映射到宿主机器上就ok了

**编译调试**

goland里面介绍的很明白，有一个坑 `exec ./main`的时候后面怎么传参数给调试进程，正确的姿势: 后面跟 `--`，告诉dlv，这是给调试进程用的。

```shell
dlv --listen=:9004 --headless=true --api-version=2 --accept-multiclient exec ./main -- start --env debug
```

**dlv listen以后怎么退出来？**

不好意思，我也没有找到正确的姿势，万能的方式，新启动一个终端kill掉他，然后会问，docker怎么attach以后还是当前窗口，这个....

```shell
docker exec -it centos7 bash
```

**看一下我调试解决的bug**

```go
func start() {
	for {
		clients, err := hub.Wait()
		if err != nil {
			logger.Debugf("epoll wait %v", err)
			continue
		}
		for _, client := range clients {
      // 这里是68行，下面这一行会报 空指针 的错误
			bt, opCode, err := wsutil.ReadClientData(client.conn)
			if err != nil {
				log.Printf("read message error: %v", err)
				continue
			}
			// 处理ping/pong/close
			if opCode.IsControl() {
				err := wsutil.HandleClientControlMessage(client.conn, wsutil.Message{
					OpCode:  opCode,
					Payload: bt,
				})
				if err != nil {
					if _, ok := err.(wsutil.ClosedError); ok {
						hub.unregister <- *client
					}
					continue
				}
				continue
			}
			cmsg := ClientMessage{}
			if err := json.Unmarshal(bt, cmsg); err != nil {
				logger.Errorf("json unmarshal error: %v", err)
				continue
			}
			hub.broadcast <- NewDefaultMsg(client, cmsg.Content, cmsg.ChannelId)
		}
	}
}
```

报错信息:

```go
panic: runtime error: invalid memory address or nil pointer dereference
[signal SIGSEGV: segmentation violation code=0x1 addr=0x8 pc=0xdf08d4]

goroutine 20 [running]:
dyc/internal/module/chat.start()
	/root/github/api.douyacun.com/internal/module/chat/client.go:68 +0x64
created by dyc/internal/module/chat.init.0
	/root/github/api.douyacun.com/internal/module/chat/client.go:26 +0x82
```

可以看出来是client为nil了，那就出现`hub.Wait()`,  调用epoll wait的时候返回的client有nil，debug一下

![](/images/blog/1/golang/assert/delve-debug.png)

wait函数的代码:

```go
func (e *epoll) Wait() ([]*Client, error) {
	events := make([]syscall.EpollEvent, 100)
	n, err := syscall.EpollWait(e.Fd, events, 100)
	if err != nil {
		return nil, err
	}
	connections := make([]*Client, n)
	for i := 0; i < n; i++ {
		conn := e.connections[int(events[i].Fd)]
		connections = append(connections, conn)
	}
	return connections, nil
}
```

next一直运行，看一下有连接进来的情况:

![](/images/blog/1/golang/assert/delve-debug-wait.png)

这里应该是对`syscall.EpollWait` 第二个参数events， 第一个返回值n的理解有问题，但这不是关键，关键是远程调试姿势有了。



golang一般都是运行在linux机器上的，如果用不到linux特有服务的话都好说，本地直接调试开发就ok了，万一用到epoll了，只能远程调试了

golang如何远程调试代码？


最近发现从百度跳转过来的都是很奇怪的域名，捏着鼻子想了想，一直用的是Google搜索问题，针对Google做了很多seo优化，后来了解一下大部分程序员还都是用百度的。想问一句：这么多的广告，几乎搜不到文档，甚至Github源码都搜不到～，怎么忍受的了～。

万般无奈，从Google跳过来的人着实比较少，也没有其他的入口可以让大家看到了～



问题：百度已经收录页面，虽然链接域名不对但是也不能放弃这些可怜的入口，毕竟是技术能解决的问题，如何能让百度继续保持收录？

首先为什么会有奇怪的域名，站点入口是通过kong网关代理转发流量的。肯定出在kong的配置上了。没有限制Hosts导致douyacun.com下的任意子域名只要路径正确都可以访问到，这是SEO的大忌～

<img src="/images/blog/1/kong/assert/image-20210112233458514.png" alt="image-20210112233458514" style="zoom:50%;" />

那为啥Google的收录都是正常的？其实Google我一直都是提交的sitemap。其实Google也爬了很多其他域名的链接～



问题：那kong如何实现域名301跳转？

- 官方给出的是插件: `https://docs.konghq.com/hub/kong-inc/forward-proxy/` 企业付费插件

- github 给出的方案就是：https://github.com/Kong/kong/issues/3503 修改`nginx_kong.lua`模板

其他问题：

1. docker部署的kong套装～
2. 多个域名，不能用`server_name` 去匹配了～

第一个问题：使用逻辑卷挂载本地 `nginx_kong.lua` 到容器中去～，注意不能直接修改 kong/nginx-kong.conf ，一旦kong重启执行 nginx_kong.lua 生成新的nginx-kong.conf配置

第二个问题：多个域名匹配，这其实是nginx的事情了～，在 `location /` 根路径下判断域名是否需要重定向，注意 if 不支持 or / and，要用正则匹配，简单贴一下代码:

```nginx
....
location / {
  if ( $host ~ "(^douyacun.com$|^server.douyacun.com$|^7www.douyacun.com$|^rank.chinaz.comwww.douyacun.com$)") {
    rewrite ^/(.*) https://www.douyacun.com/$1 permanent;
    break;
  }
  ....
}
```



kong没有提供重定向的配置功能，唯一的插件也是需要企业版

kong 302/301重定向，保住百度已收录的链接


![kong http log](/images/blog/1/kong/assert/137287054_2480479648928442_6391221166333310365_n.jpg)

背景：博客文章SEO优化，百度和Google的收录速度比较慢，需要统计百度和Goole爬虫每天的请求量，博客使用kong作为网关层，代理请求服务

分析：

- 为了避免跨域，后端服务和前端服务均使用同一域名，kong 根据 path 路由到不同 service 上
- 统计爬虫的请求，正常用户请求需要过滤掉，爬虫会在 User-Agent 指明来自哪里
- 数据存储与报表展示，这里因为后端使用的es存储配套kibana，图表的展示做起来也相对简单

#### kong日志插件 http-log

首先要解决的是不同域名，不同路径，而kong的插件是支持到**路由**层级的。

请求方法：post/put/patch 

http endpoint：接收日志的接口地址（此路由已经限制ip了）

![image-20210116132443906](/images/blog/1/kong/assert/image-20210116132443906.png)

#### 统计爬虫请求

通过 User-Agent 来识别各大搜索引擎的爬虫，贴下 http-log 插件发送过来的原始数据（只是请求部分，全部太长了）

```json
{
    "request": {
        "querystring": {},
        "size": 458,
        "uri": "/article/7BVuR3ABe5zSv27mtyuf",
        "url": "https://www.douyacun.com:8443/article/7BVuR3ABe5zSv27mtyuf",
        "headers": {
            "accept": "*/*,application/signed-exchange;v=b3",
            "accept-encoding": "gzip,deflate,br",
            "amp-cache-transform": "google;v=\"1..2\"",
            "connection": "keep-alive",
            "from": "googlebot(at)googlebot.com",
            "host": "www.douyacun.com",
            "user-agent": "Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.90 Mobile Safari/537.36 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)",
            "x-anonymous-consumer": "true",
            "x-consumer-id": "762663d6-f465-4549-a4f8-ac4ae51f7f0e",
            "x-consumer-username": "anonymous"
        },
        "method": "GET"
    }
}
```

需要统计多个搜索引擎的请求，选择使用正则来过滤正常请求，爬虫的请求正常入库

```regexp
(Baiduspider|Googlebot|Googlebot|360Spider|Sogou|Bingbot)
```

顺便贴一下go定义的结构体，只是取了一下我认为需要的数据

```go
type KongHttpLog struct {
	Latencies struct {
		Request json.Number `json:"request"`
		Kong    json.Number `json:"kong"`
		Proxy   json.Number `json:"proxy"`
	} `json:"latencies"`
	Request struct {
		Querystring map[string]string `json:"querystring"`
		Size        json.Number       `json:"size"`
		Uri         string            `json:"uri"`
		Url         string            `json:"url"`
		Headers     map[string]string `json:"headers"`
		Method      string            `json:"method"`
	} `json:"request"`
	ClientIp string  `json:"client_ip"`
	Tries    []tries `json:"tries"`
	Response struct {
		Headers map[string]string `json:"headers"`
		Status  json.Number       `json:"status"`
		Size    json.Number       `json:"size"`
	}
	Spider string `json:"spider"`
	Date   string `json:"date"`
}
```

#### ES 存储数据

正常来说搜索引擎的爬虫媒体不会有大量的请求，我们定义储存策略是：按月统计，保留3个月，定期删除3个月之前的数据

还有个的问题是，每个月需要创建index设置mapping否则字段类型都是es猜测出来的，这里es提供了 [index template](https://www.elastic.co/guide/en/elasticsearch/reference/7.10/indices-templates.html) 如果index 命名命中了 `index_patterns` ，如果不存在会自动按照template创建index, 避免了需要自动脚本来创建index

```json
{
  "index_patterns": ["spider_*"],  
  "mappings": {
    "properties": {
      "date": {
        "type": "date"
      },
      "spider": {
        "type": "keyword"
      }
    }
  }
}
```

使用kibana做个折线图，每日观察一下趋势

![image-20210116180415575](/images/blog/1/kong/assert/image-20210116180415575.png)



so: kong收集搜索引擎爬虫每日收录哪些网页的目的已经实现了

刚加完3个小时后，我就统计到了Google的访问全部500了～～～～，一万个草泥马

![image-20210116213422686](/images/blog/1/kong/assert/image-20210116213422686.png)



kong 只有一个server，所有的域名都会走这一个server，然后转发路由，那如何按不同域名收集日志？

kong日志收集：不同域名，不同路由


**go连接mysql为什么需要 import _ "github.com/go-sql-driver/mysql"**

go中import _的作用只执行引入包的init函数，那么go-sql-driver/mysql 的init函数又做了什么，在`database/sql` 中的`drivers map[string]driver.Driver`注册引擎 mysql => MySQLDriver{}

```go
// go-sql-driver/mysql/driver.go
func init() {
	sql.Register("mysql", &MySQLDriver{})
}
```


**SetMaxIdleConns/SetMaxOpenConns/SetConnMaxLifetime 设置的值有什么用呢？**

- db.maxLifetime 连接从创建开始存活的时间，mysql默认tcp连接的超时时间 8h
- db.maxOpen 打开的连接最大数量，超过该数量后，query会被阻塞等待可用连接
- db.maxIdle 空闲池维持的最大连接数量

**sql.Open为什么只需要一次调用即可?**

1. 加载驱动程序 go-sql-driver/mysql
2. 初始化DB数据结构
3. 构造创建连接channel/重置连接channel

这里并有实际去和数据建立连接，也没有对数据库连接的参数校验，只是初始化了DB结构体，DB结构体中已经包含了连接池 freeConn []*driverConn, 没有必要多次调用open，全局维护一个DB即可，如果需要验证 账户密码/网络是否能通信，需要调用ping来检测。

```go
type DB struct {
	waitDuration int64 // 统计每次链接的等待时间

	connector driver.Connector

	// 已经关闭的连接数量
	numClosed uint64

	mu sync.Mutex

	freeConn     []*driverConn               // 空闲池
	connRequests map[uint64]chan connRequest // 等待连接队列，当前连接达到maxOpen时，就无法不在创建连接，创建一个请求的channel入队列并等待并阻塞当前goroutine
	nextRequest  uint64                      // connRequests[] 指向下一个坑位
	numOpen      int                         // 正在使用的连接数量

	// channel 通过此channel来接受建立新的session连接
	// DB.connectionOpener for select 接收channel
	openerCh          chan struct{}
	resetterCh        chan *driverConn       // 重置session以便其他query复用当前session
	closed            bool                   // 标记是否已经关闭链接
	dep               map[finalCloser]depSet //
	lastPut           map[*driverConn]string // 调试用
	maxIdle           int                    // 维持的最大空闲连接数，小于等于0使用defaultMaxIdleConns（2)
	maxOpen           int                    // 维持的最大连接数，0无限制
	maxLifetime       time.Duration          // 连接可以重用的最长时间
	cleanerCh         chan struct{}
	waitCount         int64 // 等待连接的总数
	maxIdleClosed     int64 // 由于空闲而连接的总数
	maxLifetimeClosed int64 // 连接存活时间超过maxLifetime而关闭的时间

	stop func() // 取消接收 建立连接channel(openerCh)/重置session channel(resetterCh)
}
```



**如果获取数据连接池的状态？当前的连接总数，SetMaxOpenConns/SetMaxIdleConns的数量是否合适。**

使用db.Stats可以查看当前连接池的一些状态,这边返回了一个DBStats结构体，一起看下:

```go
type DBStats struct {
	MaxOpenConnections int // 打开的最大连接数，包含已经关闭了的连接

	// 连接池状态
	OpenConnections int // 当前建立连接的数量，包括正在使用和空闲的数量
	InUse           int // 正在使用的连接数
	Idle            int // 已建立连接，空闲中的连接数

	// 统计
	WaitCount         int64         // 等待连接的总数，这里需要着重关注一下
	WaitDuration      time.Duration // query持续等待连接的总时长
	MaxIdleClosed     int64         // 达到SetMaxIdleConns，而关闭的连接数量
	MaxLifetimeClosed int64         // 达到SetConnMaxLifetime. 而关闭的连接数量
}
```

- WaitCount  着重关注一下，看下是不是有慢查询阻塞了可用的连接数量
- MaxIdleConns设置的过小，而请求数过多导致，会导致MaxIdleClosed比较大，WaitCount也会比较大

注意：db.Stats不要调用过于频繁，它会对整个DB连接池加锁，过于频繁有一定开销。



**DB.Ping()做了哪些事情？DB是如何从连接池中获取一个可用的连接的？**

1. 获取连接，可以复用连接 （cachedOrNewConn）
2. 获取一个可用的连接 driverConn
   1. 复用空闲池中freeConn已有的连接
      1. 从空闲池中移除第一个连接conn
      2. 这期间都是有锁的，freeConn是一个切片，是并发不安全的
      3. 该连接是否在生命周期内 lifetime -- db.SetLifeTime设置的tcp连接存活时间
         - 本连接过了生命周期，返回 driver.ErrBadConn
      4. 返回此conn
   2. db.SetMaxOpenConns设置了最大打开的连接数，且当前打开的连接已经达到最大数
      1. 创建一个等待请求，放入等待队列，阻塞当前goroutine
      2. 等待超时使用context取消，或者等待直到获取可用的连接
         - ctx取消后还是获取到了连接，放回空闲池
      3. 获取到可用连接，统计本次阻塞时长，可以注意到如果DB.Stats().WaitDuration大了以后问题就很严重了
         - 如果本连接过了生命周期，返回 driver.ErrBadConn
      4. 返回此Conn
   3. 封装driver返回的connect到driverConn
      1. 标记driverConn inUse使用中
      2. 记录连接创建时间createdAt
      3. db指向连接池
      4. 真正底层的连接

源码小细节：

- 移除切片第一个元素：`copy(db.freeConn, db.freeConn[1:])`
- 删除map中的元素:  delete(db.connRequests, reqKey)
- map[key]interface: 也可以使用channel做为key
- 生命周期判断：createdAt.Add(lifetime).Before(time.now()) 

- 参观一下context的用法

```go
select {
// 这里留取消的口
case <-ctx.Done():
  select {
  // 之前我们分析过select尽量不要加default，单那是for select结构，会造成自旋锁，长期占用M不释放
  // 如果这里不用default它就阻塞一直等待req channel中有connect，这里并不是为了等待，只是为了清理一下channel的connect，防止孤儿connect
  default:
	case ret, ok := <-req:
		//...
  }
  return nil, ctx.Err()
case ret, ok := <-req:
  // ...
  return ret.conn, ret.err
}

// 我们在外面如何控制超时呢？
fun bar(){
  t := time.After(10)
  ctx := context.Background()
  res := make(chan struct{})
  go func() {
    ci, _ := conn(ctx)
    res<-ci
  }()
  select {
  case <-t:
    ctx.Done()
  case ci := <-res:
    if ci != nil {

    }
  }
}
```



go数据库连接池



# npm publish: react component/react hook component

 [![npm](https://img.shields.io/npm/v/npm-publish-react-component)](https://www.npmjs.com/package/npm-publish-react-componentr) [![npm](https://img.shields.io/npm/l/npm-publish-react-component)](https://www.npmjs.com/package/npm-publish-react-component) ![react supported](https://img.shields.io/badge/React-%5E16.8.0-blue.svg)

已经成功发布 [react 天气组件](https://www.npmjs.com/package/react-tencent-weather) , 以及  [npm publis react demo ](https://www.npmjs.com/package/npm-publish-react-component) 简单实例，此文就是基于此demo

完整代码已经发到 Github:  [https://github.com/douyacun/npm-publish-react-component](https://github.com/douyacun/npm-publish-react-component) 

误区：

1. npm 发布的react包是源码还是编译后的代码？ 编译后的代码
2. npm 如何在本地测试已经打包的代码？npm link, 这个后续详细讲
3. npm 打包以后 css 文件如何处理？webpack配置，js文件和css文件打包到一个文件
4. npm 发布的react包如何支持服务端渲染？css单独打包，import

概要：

1. package.json 配置
2. webpack 配置, 支持服务端渲染
3. [npm](https://www.npmjs.com/package/npm-publish-react-component)  账号，npm link，npm publish，
4. ISSUE

体验:

```bash
git clone https://github.com/douyacun/npm-publish-react-component.git
npm install
npm start
```

目录：

```
.
├── LICENSE
├── babel.config.json
├── example
│   ├── index.html
│   ├── index.js
│   └── webpack.config.js
├── lib
│   ├── index.js
│   └── index.js.LICENSE.txt
├── package.json
├── src
│   ├── index.css
│   └── index.js
└── webpack.config.js
```



# package.json 配置

1. git init初始化，指定origin仓库，接下来npm会帮忙初始化号git相关的字段

2. `npm init` 初始化 package.json，里面的信息都填写一下，这是搜到这个包的关键，尤其是是keywords

3. 安装一下react打包需要的插件, react/babel/webpack

```
npm install react react-dom --save
npm install @babel/core @babel/preset-env @babel/preset-react babel-loader --save-dev
npm install webpack webpack-cli webpack-dev-server --save-dev
```

4. bable配置文件 `babel.config.json`

```json
{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}
```

完整 的 `package.json` 

```json
{
  "name": "npm-publish-react-component", // 重要! npm install <?> 包名，全局唯一
  "version": "1.0.0", // 版本号，每次发布累加一
  "description": "npm发包流程", // seo 三剑客
  "main": "lib/index.js",// 重要！import Demo from "npm-publish-react-component" 就是引入main指定的文件～
  "keywords": [
    "npm publish",
    "npm发布",
    "react组件",
    "react component"
  ],// seo 三剑客
  "scripts": {
    "start": "webpack serve --config example/webpack.config.js",
    "build": "webpack"
  },
  "author": "douyacun",
  "license": "MIT",
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^4.5.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.11.1",
    "webpack-cli": "^4.3.1",
    "webpack-dev-server": "^3.11.1"
  },
  "directories": {
    "example": "example",
    "lib": "lib"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/douyacun/npm-publish-react-component.git"
  },
  "bugs": {
    "url": "https://github.com/douyacun/npm-publish-react-component/issues"
  },
  "homepage": "https://github.com/douyacun/npm-publish-react-component#readme"
}

```

- dependencies 会在npm install <your package>时自动安装
- devDependencies 本地安装时需要用到，打包用的肯定放在devDependencies里面
- peerDependencies 重要！我是用 react hook 写的组件，是react 16.8.4里提供的功能，这里react必须要大于16.8.4的版本

# webpack 配置

1. 配置入口文件 

```
entry: './src/index.js', // 打包哪个文件
```

2. 配置输出目录，文件名，这个要对应到 `package.json`  **main** 文件

```
output: {
    path: path.join(__dirname, '../lib/'), // 输出到哪
    filename: 'index.js', // 输出的文件名字
    libraryTarget: 'umd', // 重要！
}
"main": "lib/index.js"
```

3. `libraryTarget` :  很重要，意味着我们打包出来的js文件可以在什么环境使用～ <a name="libraryTarget"></a>

这里罗列一下各个选项的含义：

- var [默认]:  分配给一个变量值

```js
var MyLibrary = _entry_return_;
// 在一个单独的 script……
MyLibrary.doSomething();
```

- this： 分配给this变量

```
this["MyLibrary"] = _entry_return_;

// 在一个单独的 script……
this.MyLibrary.doSomething();
MyLibrary.doSomething(); // 如果 this 是 window
```

- window： 当 library 加载完成，入口起点的返回值将分配给 window 对象。

```js
window["MyLibrary"] = _entry_return_;

window.MyLibrary.doSomething();
```

- golbal: 分配给 `global` 对象的这个属性下。一般用在node环境中

```js
global["MyLibrary"] = _entry_return_;

global.MyLibrary.doSomething();
```

- commonjs： 分配给 exports 对象。这个名称也意味着，模块用于 CommonJS 环境：这是我们需要的～～～

```js
exports["MyLibrary"] = _entry_return_;

require("MyLibrary").doSomething();
```

- amd：必须是支持define/require的环境引入

```js
define([], function() {
  return _entry_return_; // 此模块返回值，是入口 chunk 返回的值
});
```

- umd：混编，支持 commonJs/global/amd的环境: 这是我们需要的～～～

```
(function webpackUniversalModuleDefinition(root, factory) {
  if(typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if(typeof define === 'function' && define.amd)
    define([], factory);
  else {
    var a = factory();
    for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
  }
})(typeof self !== 'undefined' ? self : this, function() {
  return _entry_return_; // 此模块返回值，是入口 chunk 返回的值
});
```

4. react/css 编译规则

完整 `webpack.config.json`

```js
const path = require('path');

module.exports = {
    entry: './src/index.js', // 打包哪个文件
    output: {
        path: path.join(__dirname, '../lib/'), // 输出到哪
        filename: 'index.js', // 输出的文件名字
        libraryTarget: 'commonjs2', // 重要！
    },
    externals: { // 重要！Minified React error #321 https://github.com/facebook/react/issues/16029
        react: {
            commonjs: 'react',
            commonjs2: 'react',
            amd: 'react',
            root: 'React',
        },
        'react-dom': {
            commonjs: 'react-dom',
            commonjs2: 'react-dom',
            amd: 'react-dom',
            root: 'ReactDOM',
        },
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    mode: "production",
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"] // style-loader 会把css与js文件打包在一个文件中
            },
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: ["babel-loader"]
            }
        ]
    },
    performance: {
        hints: "warning", // 枚举
        hints: "error", // 性能提示中抛出错误
        hints: false, // 关闭性能提示
        maxAssetSize: 200000, // 整数类型（以字节为单位）
        maxEntrypointSize: 400000, // 整数类型（以字节为单位）
        assetFilter: function (assetFilename) {
            // 提供资源文件名的断言函数
            return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
        }
    }
}
```

服务端渲染:

```js
const path = require('path');
const TerserJSPlugin = require('terser-webpack-plugin');
const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
    output: {
        path: path.join(__dirname, '../lib/ssr/'),
        filename: 'index.js',
        libraryTarget: 'commonjs2',
    },
    optimization: {
        minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
    },
    plugins: [new ExtractCssChunks({filename: 'index.css',})],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ExtractCssChunks.loader, "css-loader"]
            },
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: ["babel-loader"]
            }
        ]
    }
}
```

其他配置复用上面的配置，使用了2个插件将css单独出一个文件出来，否则服务端渲染时会报：`document is not defined`,

- ExtractCssChunks
- OptimizeCSSAssetsPlugin

这样引入组件时就需要单独引入js文件和css文件：

```js
import React from 'react';
import ReactDOM from 'react-dom';
import Weather from 'react-tencent-weather/lib/ssr/index.js';
import 'react-tencent-weather/lib/ssr/index.css';

ReactDOM.render(
    <div><Weather province="上海" city="上海" /></div>,
    document.getElementById('root')
)
```



# [npm](https://www.npmjs.com/)  账号，npm link，npm publish，

**1. 注册npm账号**

去 [https://www.npmjs.com/](https://www.npmjs.com/) 注册一个账号就ok了

- 在项目目录下 npm login
- 输入 Username/Password/Email: (this IS public)

在此注意！： npm是否使用淘宝或其他镜像代理

```bash
npm config list
```

如果使用了的话，注视掉

```bash
vim .npmrc

//registry=https://registry.npm.taobao.org/
```

使用npm build打包一下出来js文件，npm包发布的是webpack babel编译后的文件～

```js
npm build
```

打包完成后肯定要测试一下的对吧

**2. 本地测试打包文件 npm link**

`npm link` 会把当前目录 软链 到全局路径下

```bash
➜  npm-publish-react-component git:(master) ✗ npm link
npm notice created a lockfile as package-lock.json. You should commit this file.
removed 262 packages in 3.534s

52 packages are looking for funding
  run `npm fund` for details

/Users/liuning/.nvm/versions/node/v12.19.0/lib/node_modules/npm-publish-react-component -> /Users/liuning/Documents/github/npm-publish-react-component
```

 `npm link npm-publish-react-component` 将 全局路径下的 `npm-publish-react-component` 包软链到当前目录下的 `node_modules` <a name="link"></a>

```bash
➜  npm-publish-react-component git:(master) ✗ npm link npm-publish-react-component
/Users/liuning/Documents/github/npm-publish-react-component/node_modules/npm-publish-react-component -> /Users/liuning/.nvm/versions/node/v12.19.0/lib/node_modules/npm-publish-react-component -> /Users/liuning/Documents/github/npm-publish-react-component
```

我们就可以直接在example/index.js中直接import使用

```react
import React from 'react';
import ReactDOM from 'react-dom';
import Demo from 'npm-publish-react-component';

ReactDOM.render(
    <div><Demo name="douyacun"/></div>,
    document.getElementById('root')
)
```

删除 `package-lock.json`  `npm start` 要确保 使用的webpack使用的配置文件是测试的配置，最好区分 测试/正式 环境



# ISSUE

**1. 引入包报错: `React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.`**

```
react.development.js:220 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
```

这个就是webpack没有指定:  `libraryTarget` 导致，[详细在看一下上面我们罗列的选项](#libraryTarget)



**2. 引入包报错：`Uncaught ReferenceError: module is not defined`**

```js
import React from 'react';
import ReactDOM from 'react-dom';
import Demo from 'douyacun-react-demo';

ReactDOM.render(
    <div><Demo name="douyacun"/></div>,
    document.getElementById('root')
)
```

报错：

![module is not defined](/images/blog/1/react/assert/image-20210109163631455.png)

1. 这里是因为package.json没有定义 main 入口文件，import 不知道默认引入哪个文件
2. example 本地测试环境配置的测试环境，没有入口文件，确认是否指向 example/index.js。



**3. npm run build 报错 Cannot find module 'pkg-dir'**

这个是因为:  npm link 在 node_module [创建软链导致的](#link)

解决方案：

```
npm install
```



**4. import react组件时报错：Uncaught Error: Minified React error #321**

如果react组件中使用了hook，useState/useEffect 就会导致这个问题，react官方给出的解决方案：[https://github.com/facebook/react/issues/16029](https://github.com/facebook/react/issues/16029)

原因是因为两次引入了react

```
➜  npm-publish-react-component git:(master) ✗ npm run build

> npm-publish-react-component@1.0.0 build /Users/liuning/Documents/github/npm-publish-react-component
> webpack

{ javascriptModule: false }
asset index.js 8.28 KiB [compared for emit] [minimized] (name: main) 1 related asset
runtime modules 931 bytes 4 modules
orphan modules 326 bytes [orphan] 1 module
cacheable modules 19.6 KiB
  modules by path ./node_modules/ 16.8 KiB
    modules by path ./node_modules/react/ 6.48 KiB
      ./node_modules/react/index.js 190 bytes [built] [code generated]
      ./node_modules/react/cjs/react.production.min.js 6.3 KiB [built] [code generated]    <----- 这里将 react 也打包进去了～
    ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB [built] [code generated]
    ./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
    ./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]
  modules by path ./src/ 2.85 KiB
    ./src/index.js + 1 modules 2.49 KiB [built] [code generated]
    ./node_modules/css-loader/dist/cjs.js!./src/index.css 368 bytes [built] [code generated]
webpack 5.12.2 compiled successfully in 1092 ms
```

解决方法：

```json
externals: { // 重要！Minified React error #321 https://github.com/facebook/react/issues/16029
  react: {
    commonjs: 'react',
    commonjs2: 'react',
    amd: 'react',
    root: 'React',
  },
  'react-dom': {
    commonjs: 'react-dom',
    commonjs2: 'react-dom',
    amd: 'react-dom',
    root: 'ReactDOM',
  },
}
```





为了发布一个react npm package，在此默默的抹了2把泪～

npm publish: react component/react hook component


![134245504_789637481968571_8633124284968352778](/images/blog/1/golang/assert/134245504_789637481968571_8633124284968352778.jpg)

博客支持github、gg登录，github虽然偶尔能访问成功，但大部分是timeout，gg直接不用说



最初我的解决方案是从阿里云租一台轻量级香港的服务器每月25元，持续了有大半年。但是实在没有别的用途，我又有其他代理可以访问。最近就决定释放阿里云的轻量级服务器了。



关于我是如何通过阿里云服务器代理访问国外服务的，代码放在gtihub上: https://github.com/douyacun/gproxy

支持http代理  、文件下载代理：https://github.com/douyacun/gproxy/blob/master/internal/controllers/request.go



go也是支持通过 socks5 和 http 代理访问的:

# http代理

正确的http代理使用姿势

```go
proxy, _ := url.Parse("http://127.0.0.1:1081")
clt := http.Client{
  Timeout: 5 * time.Second,
  Transport: &http.Transport{
    Proxy:           http.ProxyURL(proxy),  // 使用代理请求
    TLSClientConfig: &tls.Config{InsecureSkipVerify: true}, // 跳过https证书资格验证
  },
}
resp, err := clt.Get(fmt.Sprintf("http://www.google.com/ping?sitemap=%s", sitemapUrl))
```

go http提供了2个函数:

```go
// 使用环境变量: HTTP_PROXY,HTTPS_PROXY
func ProxyFromEnvironment(req *Request) (*url.URL, error)
// 指定端口
func ProxyURL(fixedURL *url.URL) func(*Request) (*url.URL, error)
```



# Socks5 代理

http代理直接使用http包即可完成，不过socks5就得用: [golang.org/x/net/proxy](https://pkg.go.dev/golang.org/x/net/proxy#Dialer)

```go
package main

import (
	"crypto/tls"
	"fmt"
	"golang.org/x/net/proxy"
	"io/ioutil"
	"log"
	"net/http"
	"time"
)

func main() {
	dialer, err := proxy.SOCKS5("tcp", "127.0.0.1:1080", nil, proxy.Direct)
	if err != nil {
		log.Fatalf("socks5 init err: %s", err.Error())
		return
	}
	clt := http.Client{
		Timeout: 5 * time.Second,
		Transport: &http.Transport{
			TLSClientConfig: &tls.Config{InsecureSkipVerify: true},
			Dial:            dialer.Dial,
		},
	}
	resp, err := clt.Get("https://www.google.com")
	if err != nil {
		log.Fatalf("ping google sitemap err: %s", err.Error())
		return
	}
	defer resp.Body.Close()
	if resp.StatusCode != http.StatusOK {
		log.Fatalf("curl google failed~")
		return
	}
	body, err := ioutil.ReadAll(resp.Body)
	if err != nil {
		log.Fatalf("google response body read err: %s", err.Error())
	}
	fmt.Println(string(body))
	return
}
```

结果是可以正常返回的，服务器是在北京的。

![image-20210103211632721](/images/blog/1/golang/assert/image-20210103211632721.png)

如果你想问我梯子是如何搭的话，可以邮箱(douyacun@gmail.com)联系我，不公开讨论！



解决: 在服务上使用代理访问github、google

go代理: http/socks5 proxy


react 服务端渲染 cookie 有2个问题：

1. [服务端执行的代码如何拿到cookie并解析透穿给后端接口，后端又如何设置cookie？](#服务端cookie透传)
2. [浏览器执行的代码如何读取cookie？](#客户端读取cookie)



# 服务端cookie透传

明白next的渲染流程很重要：

浏览器打开页面 -> node服务请求后端接口 -> node服务渲染页面 并响应



node服务透传cookie给后端接口：此时cookie只能从request中取的cookie:  [nextjs文档](https://nextjs.org/docs/api-reference/data-fetching/getInitialProps)

```react
Article.getInitialProps = async ({ req, query }) => {
    // 文章详情
    const { article, statusCode, errMessage } = await GET({
        url: `/api/article/${id}`,
        headers: {
            Cookie: req.headers.cookie
        }
    }).then(resp => {
        return {article: resp.data, statusCode: resp.code, errMessage: resp.message}
    })
    return { article: article, statusCode: statusCode, errMessage: errMessage }
}
```



后端设置cookie：

- 如果是node服务请求的后端接口，此时的node服务就相当于nginx一样的代理请求，需要将响应的cookie透传给浏览器

```react
import React from "react";
import {GET} from '../src/request';

function Demo ({data}) {
    return (
        <div>
            {data}
        </div>
    )
}

Demo.getInitialProps = async ({ req, query, res }) => {
    let cookie;
    const {data, code, message} = await GET({url: "http://douyacun.io/api/helper/demo", noCheck: true}).
    then((resp) => {
        res.setHeader("set-cookie", resp.headers["set-cookie"]);
        return resp.data
    }).
    then((data) => {
        return data
    })
    return {data: data}
}

export default Demo
```

GET 是封装的 axios，axios 的response不是node原生的 [response](https://github.com/axios/axios#response-schema)，而nextjs的res是node原生的[response](https://nodejs.org/api/http.html#http_class_http_serverresponse)，这里需要注意一下使用的请求库

**重点是：明白node服务渲染，其实是一层代理服务**

- 如果是浏览器客户端请求的后端接口，response是可以直接被浏览器读取到的，就不需要我们做什么事情了。



# 客户端读取cookie

客户端请求接口会有2个cookie问题：

1. 跨域请求携带cookie
2. 如何读取并解析cookie

### 跨域请求携带cookie

原理是一致的，先header请求服务端，验证服务端是否支持跨域，以及支持的域名：

```http
Access-Control-Allow-Origin: https://www.douyacun.com
```

> 这里一定要明确指定域名，否则请求还是无法携带cookie的

axios 需要指定：

```http
withCredentials: true
```



### 浏览器读取并解析cookie

用户信息存cookie的原因是不安全，也不建议的。当然前提用户信息存在隐私数据，解决方案是存在session中，cookie只是存session id。

我的博客cookie只存 昵称和ID。如何确保cookie不被篡改呢？cookie，对数据进行签名，签名使用的key是存储在服务端里。如果有更高的安全需求的，请移步～

重点：**react服务端渲染，cookie是存在浏览器上的，确保代码是在浏览器客户端上执行的才能读取到对吧**

```react
import React from 'react';
import { parseCookies } from 'nookies'

function Demo() {
    const [user, setUser] = React.useState({})
    // 首次加载
    React.useEffect(() => {
        const all = parseCookies();
        if (all.douyacun) {
            setUser(JSON.parse(all.douyacun));
        }
    }, [])
  return (<div>Hello {user.name}.</div>)
}

export default demo
```

[React.useEffect的用法](https://zh-hans.reactjs.org/docs/hooks-reference.html#useeffect), 需要注意的是:

> 默认情况下，effect 将在每轮渲染结束后执行，但你可以选择让它 [在只有某些值改变的时候](https://zh-hans.reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect) 才执行。
>
> 如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（`[]`）作为第二个参数。这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值，所以它永远都不需要重复执行，解析cookie只需要一次就够了～



nextjs getInitialProps 是在服务端执行的代码，可以通过 request.header 获取到 cookie 透传给后端接口

react服务端渲染: cookie如何透传给后端，后端如何设置cookie

react服务端渲染: markdown


[TOC]

# 左右布局

定义父框`root`  左视图 `left`，点击移动区 `resizer`，右试图 `right`，建议使用flex布局

![image-20201228233232732](/images/blog/1/react/assert/image-20201228233232732.png)

```css
root: {
  	height: "100%",
  	width: "100%",
}
left: {
    width: "70%"
},
resizer: {
  	userSelect: "none",
    display: "flex",
    backgroundColor: "#fafbfd",
    width: 14,
    cursor: "ew-resize",
    alignItems: "center",
    justifyContent: "center",
    border: "0.5px solid rgba(0, 0, 0, 0.07)",
},
right: {
  	width: "30%",
}
```

```html
<div className={classes.root} onMouseMove={mouseMoveHandler}>
  <div className={classes.left} style={{ width: leftWidth + "%", userSelect: userSelect }} ref={leftRef}>
		左
  </div>
  <div className={classes.resizer} onMouseDown={mousedownHandler}>︙</div>
  <div className={classes.right} style={{ width: rightWidth + "%" }}>
		右
  </div>
</div>
```

`resizer` 鼠标悬浮时一定是这个样式  <--> 的

如何实现左右移动呢？

1. 只有在`resizer` 区域内鼠标左键按下时，才可以左右移动
2. 鼠标左键抬起时，结束左右移动
3. 左视图宽度，鼠标移动时： [left.width = e.clientX / screen.width * 100] 鼠标x轴 -> 浏览器左边 的距离/窗口的宽度  * 100% 就是 `left` 的百分比
4. 右视图宽度，[right.width = 100 - left.width - resizer.width/screen.width] 窗口宽度 - 左视图宽度 - 移动区宽度 = 右视图宽度



### resizer 订阅 `mouseDown`

在resizer按下鼠标时，才可以左右移动，加锁:

```react
const [canMove, setCanMove] = React.useState(false) // 聊天框：是否移动
```

 `mouseDown`时，容易选中左右的文字体验感很差, 避免鼠标按下时选中文字，加锁：

```react
const [userSelect, setUserSelect] = React.useState("text")
```

处理函数:

```react
// 聊天框：开启移动
const mousedownHandler = (e) => {
  setCanMove(true)
  setUserSelect("none");
}
```

### document 订阅 `mouseup`

只能在document上订阅，不能确定最后鼠标的位置是在哪个元素上

```react
// 订阅聊天框宽度
React.useEffect(() => {
  document.addEventListener("mouseup", mouseUpHandler);
  return () => {
    document.removeEventListener("mouseup", mouseUpHandler);
  }
}, [])
```

首先`React.useEffect`,第二个参数空代表，不管state如何变化，此函数只会加载一次，类似init state。返回闭包组件卸载时执行移除document.onMouseUp的订阅

鼠标抬起后本次调整结束，持久化当前边框位置，下次再进来就不需要重新调整了:

```react
// 聊天框：结束移动
const mouseUpHandler = () => {
  setCanMove(false)
  setUserSelect("text");
  // 持久化聊天宽度
  localStorage.setItem(DiscussLeftWidth, leftWidth);
  localStorage.setItem(DiscussRightWidth, rightWidth);
}
```

### root 订阅 `mousemove`

首先获取窗口的宽度:

```react
const [screenWidth, setScreenWidth] = React.useState(100); // 聊天框：当前窗口宽度，计算左右比例

React.useEffect(() => {
 	 setScreenWidth(document.body.clientWidth);
}, [])
```

鼠标在`root` 元素内移动时，计算左右边框的百分比，为了避免鼠标移动重载次数过多导致的卡顿，加锁：

```react
const [lockResize, setLockResize] = React.useState(false); // 聊天框：加载锁，不要设置太快了
```

root 订阅鼠标移动

```react
const mouseMoveHandler = (e) => {
  if (canMove) {
    let lw = (e.clientX / screenWidth * 100).toFixed(3)
    let rw = (100 - lw - 1).toFixed(3);
    if (!lockResize && lw > 50 && (screenWidth - e.clientX) > 300) {
      setLeftWidth(lw)
      setRightWidth(rw)
      setLockResize(true)
      // 10毫秒以后释放该锁
      setTimeout(() => { setLockResize(false) }, 10)
    }
  }
}
```

# 滚动条样式

默认的滚动条样式时很粗的，中间加了 `resizer`以后就太丑了，滚动条必须瘦下来才行：

```css
left: {
  overflowY: "scroll",
  padding: 10,
  "&::-webkit-scrollbar": {
    width: 4,
  	// height: 16 只能设置宽度，长度浏览器会自动根据div长度调整
  },
  "&::-webkit-scrollbar-thumb": {
    backgroundColor: "rgba(105, 112, 125, 0.5)" // 滚动条背景色
  }
},
```

- `::-webkit-scrollbar` — 整个滚动条.
- `::-webkit-scrollbar-button` — 滚动条上的按钮 (上下箭头).
- `::-webkit-scrollbar-thumb` — 滚动条上的滚动滑块.
- `::-webkit-scrollbar-track` — 滚动条轨道.
- `::-webkit-scrollbar-track-piece` — 滚动条没有滑块的轨道部分.
- `::-webkit-scrollbar-corner` — 当同时有垂直滚动条和水平滚动条时交汇的部分.
- `::-webkit-resizer` — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

![image-20201229003702633](/images/blog/1/react/assert/image-20201229003702633.png)

























































































关键字