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

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

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

[gdb](/article/d22002b2b284ef4a2613429f154dbe49) 也是可以调试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/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/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/golang/assert/delve-debug-wait.png)

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



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

golang如何远程调试代码？


最近在研究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的理解有问题，但这不是关键，关键是远程调试姿势有了。




![kong http log](/images/blog/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/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/kong/assert/image-20210116180415575.png)



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

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

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



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

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


最近发现从百度跳转过来的都是很奇怪的域名，捏着鼻子想了想，一直用的是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)




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

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



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

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

<img src="/images/blog/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;
  }
  ....
}
```




**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



# 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/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',
  },
}
```



