Nginx Proxy Manager (NPM) 主要设计为反向代理工具，但可以通过 自定义Nginx配置 托管静态页面,具体步骤如下


# 1. Nginx Proxy Manager 安装
我们通过docker安装
docker-compose.yml
```
version: '3'
services:
  app:
    image: 'chishin/nginx-proxy-manager-zh:latest'
    restart: always
    ports:
      - '80:80'
      - '81:81'
      - '443:443'
    volumes:
      - ./data:/data
      - ./letsencrypt:/etc/letsencrypt
```
通过如下命令启动
```sh
docker compose up -d
```

# 2. 如何托管静态站点

## 2.1 添加代理主机
- 登录 NPM 管理界面。
- 转到 Hosts → Proxy Hosts → Add Proxy Host.
- 在 Domain Names 中填写域名（或留空托管IP访问）。
- 其他设置留空（无需填写目标地址）。


![image.png](/static/img/04f19369fe4d5dbb2ff3df066b3dc06f.image.webp)

## 2.2 自定义nginx配置
切换到 Advanced 标签页，添加以下配置
```nginx
location / {
    root /var/www/mysite;  # 替换为你的静态文件目录
    index index.html;
    try_files $uri $uri/ /index.html; # 防止vue、react等spa但页面应用刷新404问题
}
```
注意上面的静态文件文件要替换成宿主机的目录，例如：`/data/website/meng-admin`

![image.png](/static/img/fbcca725a3561237c2d63759e4f0ed9a.image.webp)

# 3. 其他配置
## 3.1 配置api接口反向代理
```nginx
# 处理以/ma/api开头的请求
location ^~ /ma/api {
    # 重写URL：去掉/ma，保留/api及后面的部分
    rewrite ^/ma(/.*)$ $1 break;

    # 代理到目标服务器
    proxy_pass http://x.x.x.x:xx; # 转发到目标地址

    # 以下为常见的代理设置，根据需要添加
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;

    
    # 如果目标服务器需要处理WebSocket，可以添加以下两行
    # proxy_http_version 1.1;
    # proxy_set_header Upgrade $http_upgrade;
    # proxy_set_header Connection "upgrade";
}
```

# 4. 开启gzip，示例配置如下
```nginx
# ======================
# GZIP 压缩配置（核心）
# ======================
gzip on;  # 启用 gzip 压缩
gzip_min_length 1k;  # 最小压缩文件大小（1KB以上才压缩）
gzip_comp_level 6;   # 压缩级别（1-9，6是较好的平衡点）
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;  # 压缩的文件类型
gzip_vary on;       # 根据客户端支持情况动态启用压缩
gzip_proxied any;   # 对所有代理请求启用压缩
gzip_buffers 16 8k; # 压缩缓冲区
gzip_http_version 1.1; # 启用压缩的最小 HTTP 版本


location / {
   root /data/website/meng-admin;
   index index.html;
    try_files $uri $uri/ /index.html;
autoindex on;
            gzip on;
}

location ^~ /vite.svg {
   root /data/website/meng-admin/;
}

location  ^~  /assets{
    alias /data/website/meng-admin/assets;
    index index.html;
autoindex on;

expires 30d;
    add_header Cache-Control "public, no-transform";

            # 启用 gzip 和 Brotli 压缩
    gzip_static on;  # 优先使用预压缩文件
    # brotli_static on;
    
    # 确保路径正确结尾
    # 注意：移除了try_files中的路径重写
    try_files $uri $uri/ =404;
}

# 处理以/ma/api开头的请求
location ^~ /ma/api {
    # 重写URL：去掉/ma，保留/api及后面的部分
    rewrite ^/ma(/.*)$ $1 break;

    # 代理到目标服务器
    proxy_pass http://x.x.x.x:xx;

    # 以下为常见的代理设置，根据需要添加
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;

# 启用代理压缩
    proxy_set_header Accept-Encoding gzip;
    
    # 如果目标服务器需要处理WebSocket，可以添加以下两行
    # proxy_http_version 1.1;
    # proxy_set_header Upgrade $http_upgrade;
    # proxy_set_header Connection "upgrade";
}
```

Nginx Proxy Manager托管静态站点

async await 语法是`ES7`出现的，是基于ES6的 promise和generator实现的,那么js底层是如何实现的呢，让promise异步状态变为await的同步写法。


async/await 是建立在Promise之上的语法糖，它的底层实现原理是基于状态机的转换和生成器（Generator）函数。下面我将详细描述其工作原理。
1. 生成器函数（Generator）和迭代器（Iterator）
生成器函数可以暂停和恢复执行。当调用生成器函数时，它返回一个迭代器对象，通过调用迭代器的next()方法可以逐步执行生成器函数体。每次遇到yield关键字，函数就会暂停执行并返回一个值。

2. 将异步操作转化为同步写法
async/await 通过暂停和恢复执行来实现异步操作的同步写法。async函数本质上是一个生成器函数，但使用了async关键字标记。await后面的表达式会被包装成Promise。

3. 状态机的实现
编译器（如Babel）会将async函数转换成生成器函数的形式，然后使用一个状态机（通常由一个包装函数实现）来管理生成器的状态，自动执行迭代过程。

转换步骤：

假设有这样一个async函数：

```javascript
async function example() {
  const result = await someAsyncCall();
  console.log(result);
}
```
它会被转换成类似下面的生成器函数：

```javascript
function example() {
  return spawn(function* () {
    const result = yield someAsyncCall();
    console.log(result);
  });
}
```
这里的spawn函数就是一个自动执行器，它会管理生成器的状态，处理Promise的解析，并继续执行生成器直到结束。

4. 自动执行器（spawn函数）的实现
自动执行器的作用是管理生成器的状态，处理每个yield出来的Promise，并根据Promise的结果（成功或失败）决定是继续执行还是抛出错误。

一个简化的自动执行器可能如下：
```javascript
function spawn(generatorFunc) {
  return new Promise((resolve, reject) => {
    const generator = generatorFunc();
    const step = (key, arg) => {
      let result;
      try {
        result = generator[key](arg);
      } catch (error) {
        return reject(error);
      }
      const { value, done } = result;
      if (done) {
        return resolve(value);
      }
      // 确保返回一个Promise
      Promise.resolve(value).then(
        value => step('next', value),
        error => step('throw', error)
      );
    };
    step('next');
  });
}
```

步骤解析：

spawn函数返回一个Promise，这样调用者可以使用.then()和.catch()。

创建生成器对象generator。
定义一个step函数，用于控制生成器的执行。它根据状态（'next'或'throw'）调用生成器的相应方法（generator.next()或generator.throw()）。

在首次调用时，使用step('next')启动生成器。

每次执行生成器的next或throw方法，都会返回一个对象{ value, done }，其中value是yield后面的表达式的值（通常是一个Promise），done表示生成器是否已经结束。

如果生成器未结束（done为false），则等待Promise解析（使用Promise.resolve来确保它是一个Promise），然后根据解析结果：

- 若成功，则使用step('next', value)将解析后的值传给生成器，并继续下一步。
- 若失败，则使用step('throw', error)将错误抛出到生成器内部，可以被生成器内的try-catch捕获。

如果生成器结束（done为true），则解析外部的Promise（即整个async函数的Promise）为生成器函数返回的值（即return的值）。

5. 错误处理

在async函数中，错误通过try-catch捕获。在自动执行器中，当生成器内部出现错误（包括异步操作reject）时，我们使用generator.throw()将错误抛入生成器，这样生成器内部如果有try-catch，就能捕获错误。

async await底层原理

发布订阅

# Ract19版本更新指南

React在2024年12月正式发布react 19的稳定版，那么19版本react都更新了什么内容呢，接下来小编会以案例的形式带大家了解下这些更新点。



## Actions

Actions并不是一个api,而是一个概念词汇。
按照惯例，`使用异步过渡的函数被称为 “Actions”`
Actions 自动为你管理数据提交：

- 待定状态: Actions 提供一个待定状态，该状态在请求开始时启动，并在最终状态更新提交时自动重置。
- 乐观更新: Actions 支持新的 useOptimistic Hook，因此你可以在请求提交时向用户显示即时反馈。
- 错误处理: Actions 提供错误处理，因此当请求失败时，你可以显示错误边界，并自动将乐观更新恢复到其原始值。
- 表单: <form> 元素现在支持将函数传递给 action 和 formAction 属性。将函数传递给 action 属性默认使用 Actions，并在提交后自动重置表单。
    
Action必须在startTransition内部使用。

先让我们复习一下startTransition的用法吧。
    
场景：tab页面切换，Home/Article/About，其中Article渲染页面非常卡顿，当切换到Article时，由页面卡顿，当再切换到其他页面时，会出现切换无效的问题。
 ```tsx
 import { memo, useState,useTransition } from "react"

interface TabButtonProp {
  isActive: boolean
  children: React.ReactNode
  onClick: () => void
}

const TabContainer = () => { 
  const [tab, setTab] = useState<"home" | "article" | "about">("home");
  const [isPending,startTransition] = useTransition()
  const selectTab = (newTab: "home" | "article" | "about") => {
    startTransition(() => {
      setTab(newTab);
    })
  };
  return (
    <div>
      <div>
        <TabButton isActive={tab === "home"} onClick={() => selectTab("home")}>
          Home
        </TabButton>
        <TabButton
          isActive={tab === "article"}
          onClick={() => selectTab("article")}
        >
          { isPending ? 'loading...' : 'Article'}
        </TabButton>
        <TabButton
          isActive={tab === "about"}
          onClick={() => selectTab("about")}
        >
          About
        </TabButton>
      </div>
      {tab === "home" && <HomeTab />}
      {tab === "article" && <ArticleTab />}
      {tab === "about" && <AboutTab />}
    </div>
  );
}

const TabButton = ({ children, isActive, onClick }: TabButtonProp) => {
  const btnStyle = {
    backgroundColor: isActive ? "#4096ff" : "#fff",
    border: "1px solid #999",
    padding: "8px 16px",
    margin: "0 4px",
    cursor: "pointer",
    display: "inline-block",
    fontSize: "16px",
    fontWeight: isActive ? "bold" : "normal",
    color: isActive ? "#fff" : "#000",
  };
  return (
    <button style={btnStyle} onClick={onClick}>
      {children}
    </button>
  );
};

const HomeTab = () => { 
  return <h2>Welcome to Home</h2>;

}
const AboutTab = () => { 
  return <h2>About Us</h2>;
}
const ArticleTab = () => {
  return (
    <ul>
      {new Array(100).fill(0).map((item, index) => {
        return <SlowArticle key={index} index={index} />;
      })}
    </ul>
  );
}

// 模拟一个渲染耗时的组件
const SlowArticle = memo(({ index }: {index:number}) => {
  const startTime = performance.now();
  while (performance.now() - startTime < 10) {} // 模拟慢操作

  return <li>文章：{index + 1}</li>;
});

export default TabContainer;
```
    
Actions Demo
```tsc
 import { useState, useTransition } from "react";

const ActionsDemo = () => { 
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {
    startTransition(async () => {
      // react 19 支持异步函数，而在react8中必须是同步函数
      const error = await updateName(name);
      if (error) {
        setError(error);
        return;
      }
    });
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}
```
    
## useActionState
    
    useActionState 是一个可以根据某个表单动作的结果更新 state 的 Hook。
```const [state, formAction, isPending] = useActionState(fn, initialState, permalink?);```
    
```tsx
import { startTransition, useActionState, useState } from "react";

const UseActionStateDemo = () => { 
  const [name, setName] = useState("");
  // formData就是调用submitHandle时传递的参数
  const action = async (previousState, formData) => {
    // ajax请求接口更新数据
    const resp = await updateName(formData);
    if (resp.code == 0) {
      return {
        success: true,
        data: resp.data,
      }; // 无论成功还是失败都必须有返回值，这个返回值会自动更新到state，也作为下一次的previousState
    } else {
      return {
        success: false,
        message: resp.message,
      };
    }
  };
  const [state, submitHandle, isPending] = useActionState(action, null);

  return (
    <div>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <button
        disabled={isPending}
        onClick={() => {
          startTransition(() => {
            // 注意外面必须使用startTransition包裹
            submitHandle(name);
          });
        }}
      >
        提交
      </button>

      <h1>{state}</h1>
    </div>
  );
}
```
## form action属性加强
 ```tsx
import {useState,useActionState,startTransition} from 'react'
function App(){
  // formData:FormData
  const action = async (previousState, formData) => {
    const resp = await updateName(formData)
    if(resp.code == 0){
      return {
        success: true,
        data: resp.data
      } // 无论成功还是失败都必须有返回值，这个返回值会自动更新到state，也作为下一次的previousState
    }else{
      return {
        success: false,
        message: resp.message
      }
    }
  }
  const [state, submitHandle,isPending] = useActionState(action, null);

  return (
    <div>
      <form action={submitHandle}>
        <input name="name1"/>
        <button disabled={isPending} type="submit">提交</button>
      </form>
        <h1>{state}</h1>
    </div>
  )
}
```
    
    
## useOptimistic 乐观更新

todoList案例
```tsx
import {useState,useOptimistic，startTransition} from 'react'

const fakeApi = (task) => {
  return new promise((resolve,reect) => {
    settimeout(() => {
      if(Math.random() > 0.5){
        resolve(`任务【${task}】添加成功`)
      }else{
        reject('任务添加失败')
      }
    },1000)
  })
}

function TaskList(){
  const [tasks,setTasks] = useState([]) //待办事项列表
  const [optimisticState, addOptimistic] = useOptimistic(state, (currentTasks,newTask) => {
    return [...currentTasks,newTask] //返回一个新的乐观状态
  });

  const addTask = (task) => {
    startTransition(async() => {
      // 在发起异步任务之前，先更新乐观值，如果请求失败了，会自动回滚乐观状态
      addOptimistic(task)
      // 掉接口,
      await fakeApi(task)
      //  更新真实状态
      setTasks((currentTask) => {
        return [...currentTask,task]
      })
    })
    
  }

  return (
    <div>
      <h1>待办事项列表</h1>
      <ul>
        {
          optimisticState.map((task,index) => (<li key={index}>{task}</li>))
        }
      </ul>
    </div>
  )
}
```

## useFormStatus

useFormStatus 读取离它最近的那个 <form> 的状态，就像表单是一个 Context 提供者一样

```tsx
import {useFormStatus} from 'react-dom';
async function submitForm(){
  return new Promise((res) => setTimeout(res,1000))
}
function Submit(){
  // 获取父组件Form的状态
  const { pending, data, method, action } = useFormStatus();
  return (
    <button type="submit">
      {pending ? '提交中...' : '提交'}
    </button>
  )
}
function Form({action}){
  return (
    <form action={action}>
      <input name="message" />
      <Submit />
    </form>
  )
}

function App(){
  return <Form action={submitForm} />
}

```
    
## use
  
use 是一个 React API，它可以让你读取类似于 Promise 或 context 的资源的值。
    
 ```tsx
 import { use } from 'react';

function MessageComponent({ messagePromise }) {
  const message = use(messagePromise);
  const theme = use(ThemeContext);
    // ... 
 }
```
    
与 React Hook 不同的是，可以在循环和条件语句（如 if）中调用 use。但需要注意的是，调用 use 的函数仍然必须是一个组件或 Hook。

当使用 Promise 调用 use API 时，它会与 Suspense 和 错误边界 集成。当传递给 use 的 Promise 处于 pending 时，调用 use 的组件也会 挂起。如果调用 use 的组件被包装在 Suspense 边界内，将显示后备 UI。一旦 Promise 被解决，Suspense 后备方案将被使用 use API 返回的数据替换。如果传递给 use 的 Promise 被拒绝，将显示最近错误边界的后备 UI。
    
当 context 被传递给 use 时，它的工作方式类似于useContext。而 useContext 必须在组件的顶层调用，use 可以在条件语句如 if 和循环如 for 内调用。相比之下，use 比 useContext更加灵活。
use 返回传递的 context 的 context 值。React 会搜索组件树并找到 最接近的 context provider 以确定需要返回的 context 值。
    
    
## ref
在react18中，如果想在父组件中获取子组件的ref,一般通过forwardRef实现。
    
案例点击按钮让子组件获取焦点
```tsx
import { forwardRef, useRef } from "react"

function RefDemo() { 
  const inputref = useRef<HTMLInputElement>(null)
  const focusInput = () => { 
    inputref.current?.focus()
  }
  return (
    <div>
      <h1>我是父组件</h1>
      <MyInput ref={ inputref} />
      <button onClick={focusInput}>提交</button>
    </div>
  );
}


const MyInput = forwardRef<HTMLInputElement,any>((props,ref) => { 
  return <div>
    <h1>我是子组件</h1>
    <input ref={ref} type="text"/>
  </div>
})

export default RefDemo  
```

在react19中，ref可以作为props的属性
```tsx
import {useRef } from "react"

function RefDemo() { 
  const inputref = useRef<HTMLInputElement>(null)
  const focusInput = () => { 
    console.log(inputref)
    inputref.current?.focus()
  }
  return (
    <div>
      <h1>react19</h1>
      <MyInput ref={ inputref} />
      <button onClick={focusInput}>提交</button>
    </div>
  );
}


const MyInput = (props) => { 
  return <div>
    <h1>我是子组件</h1>
    <input ref={props.ref} type="text"/>
  </div>
}

export default RefDemo 
```
## Context 简写
    
React 19 引入了更简洁的 Context 写法，现在可以直接使用 `<Context>` 代替 `<Context.Provider>`
```tsx
const ThemeContext = createContext('');
function App({children}) {
  return <ThemeContext value="dark">{children}</ThemeContext>;
} 
```
    
## refs 支持清理函数
这将使得在 ref 改变时执行清理操作变得更加容易(允许在组件卸载时自动执行清理逻辑)
    
    
场景：
一个按钮可以被另外一个按钮控制显示和隐藏，如果显示动态的添加click事件，隐藏时移除事件
    
在react8中的做法如下
```tsx
import { useEffect, useRef, useState } from "react"


function RefsDemo() { 
  const [showBtn, setShowBtn] = useState(true)
  const btnRef = useRef<HTMLButtonElement>(null)

  useEffect(() => { 
    if (btnRef.current) {
      console.log("Button 2 addEventListener");
      const handler = () => alert("Button 2 clicked");
      btnRef.current.addEventListener("click", handler);
      return () => {
        console.log("Button 2 removeEventListener");
        btnRef.current?.removeEventListener("click", handler); 
      };
    }  
  },[showBtn])
  return (
    <div>
      <h1>raect 18</h1>
      <button onClick={() => setShowBtn(!showBtn)}>点击切换按钮2状态</button>
      <br></br>
      {
        showBtn && <button ref={ btnRef}>按钮2</button>
      }
    </div>
  );
}

export default RefsDemo  
```
    
在react 19版本中的做法如下
```tsx
function RefsDemo19() {
  const [showBtn, setShowBtn] = useState(true);

  const setRef = (ref) => { 
    if (ref) {
      console.log("Button 2 addEventListener");
      const handler = () => alert("Button 2 clicked");
      ref.addEventListener("click", handler);
      return () => {
        console.log("Button 2 removeEventListener");
        ref?.removeEventListener("click", handler);
      };
    }
  }
  return (
    <div>
      <h1>raect 19</h1>
      <button onClick={() => setShowBtn(!showBtn)}>点击切换按钮2状态</button>
      <br></br>
      {showBtn && <button ref={setRef}>按钮2</button>}
    </div>
  );
} 
    
```
## 支持Document Metadata
```tsx
function BlogPost({post}) {
  return (
    <article>
      <h1>{post.title}</h1>
      <title>{post.title}</title>
      <meta name="author" content="Josh" />
      <link rel="author" href="https://twitter.com/joshcstory/" />
      <meta name="keywords" content={post.keywords} />
      <p>
        Eee equals em-see-squared...
      </p>
    </article>
  );
}  
```
    
## 支持样式表
    
样式表，无论是外部链接的 (<link rel="stylesheet" href="...">) 还是内联的 (<style>...</style>)，都需要在 DOM 中进行精确的定位，因为样式优先级规则。构建一个允许在组件内部进行组合的样式表功能是困难的，所以用户通常要么将所有的样式远离可能依赖它们的组件加载，要么使用一个封装了这种复杂性的样式库。

在 React 19 中，我们正在解决这个复杂性，并提供更深入的集成到客户端的并发渲染和服务器的流式渲染，内置支持样式表。如果你告诉 React 你的样式表的 precedence，它将管理样式表在 DOM 中的插入顺序，并确保在显示依赖于这些样式规则的内容之前加载样式表（如果是外部的）。
    
```tsx
function ComponentOne() {
  return (
    <Suspense fallback="loading...">
      <link rel="stylesheet" href="foo" precedence="default" />
      <link rel="stylesheet" href="bar" precedence="high" />
      <article class="foo-class bar-class">
        {...}
      </article>
    </Suspense>
  )
}

function ComponentTwo() {
  return (
    <div>
      <p>{...}</p>
      <link rel="stylesheet" href="baz" precedence="default" />  <-- will be inserted between foo & bar
    </div>
  )
} 
```
        
## 支持异步脚本
        
在 HTML 中，普通脚本 (<script src="...">) 和延迟脚本 (<script defer="" src="...">) 按照文档顺序加载，这使得在组件树深处渲染这些类型的脚本变得具有挑战性。然而，异步脚本 (<script async="" src="...">) 将以任意顺序加载。

在 React 19 中，我们通过允许你在组件树的任何位置，即实际依赖脚本的组件内部，渲染它们，从而为异步脚本提供了更好的支持，无需管理脚本实例的重新定位和去重。
        
```tsx
function MyComponent() {
  return (
    <div>
      <script async={true} src="..." />
      Hello World
    </div>
  )
}

function App() {
  <html>
    <body>
      <MyComponent>
      ...
      <MyComponent> // won't lead to duplicate script in the DOM
    </body>
  </html>
}    
```
        
## 支持预加载资源
在初始文档加载和客户端更新时，尽早告诉浏览器它可能需要加载的资源，可以显著提高页面性能。

React 19 包含了一些新的 API，用于加载和预加载浏览器资源，使得构建不受资源加载效率影响的优秀体验变得尽可能容易。
        
```tsx
import { prefetchDNS, preconnect, preload, preinit } from 'react-dom'
function MyComponent() {
  preinit('https://.../path/to/some/script.js', {as: 'script' }) // loads and executes this script eagerly
  preload('https://.../path/to/font.woff', { as: 'font' }) // preloads this font
  preload('https://.../path/to/stylesheet.css', { as: 'style' }) // preloads this stylesheet
  prefetchDNS('https://...') // when you may not actually request anything from this host
  preconnect('https://...') // when you will request something but aren't sure what
}
```
上面的代码渲染的结果如下
```html

<html>
  <head>
    
    <link rel="prefetch-dns" href="https://...">
    <link rel="preconnect" href="https://...">
    <link rel="preload" as="font" href="https://.../path/to/font.woff">
    <link rel="preload" as="style" href="https://.../path/to/stylesheet.css">
    <script async="" src="https://.../path/to/some/script.js"></script>
  </head>
  <body>
    ...
  </body>
</html>
```
这些 API 可以通过将像字体这样的额外资源的发现从样式表加载中移出来，优化初始页面加载。它们还可以通过预取预期导航使用的资源列表，然后在点击或甚至悬停时积极预加载这些资源，使客户端更新更快。

React19更新须知

ng-zorro-antd之less编译过程



![image.png](/static/img/a7cfabf7707c149e4a4ece3168937ae4.image.webp)


![image.png](/static/img/46a5c56ac66fbaa7b6ea50f948320c3f.image.webp)

源码分析如下
 
```ts
/**
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
 */

import * as fs from 'fs-extra';
import * as less from 'less';

import * as path from 'path';

import { buildConfig } from '../build-config';

const lessPluginCleanCSS = require('less-plugin-clean-css');
const npmImportPlugin = require('less-plugin-npm-import');

async function compileLess(
  content: string, // @root-entry-name: default;\n 再加上entry.less里的内容 @import './index.less';@import './patch.less';
  savePath: string, //编译后的css保存路径 publish/组件名称/style/index.css
  min: boolean, //是否对css压缩
  sub?: boolean,
  rootPath?: string //less路径  components/组件/style/entry.less
): Promise<void> {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const plugins: any[] = [];
  const lessOptions: Less.Options = { plugins, javascriptEnabled: true };

  if (min) {
    plugins.push(new lessPluginCleanCSS({ advanced: true }));
  }

  if (sub) {
    // 待编译less路径 [components/affix/style]
    lessOptions.paths = [path.dirname(rootPath as string)];
    // 待编译less 文件名称 components/affix/style/entry.less
    lessOptions.filename = rootPath;
    plugins.push(
      new npmImportPlugin({
        prefix: '~'
      })
    );
  }

  // 编译less
  return less
    .render(content, lessOptions)
    .then(({ css }) => {
      return fs.writeFile(savePath, css); //将编译后的css写入到指定文件  publish/组件名称/style/index.css
    })
    .catch(err => Promise.reject(err));
}

const sourcePath = buildConfig.componentsDir;
const targetPath = buildConfig.publishDir;

export async function compile(): Promise<void | void[]> {
  const componentFolders = fs.readdirSync(targetPath);
  const promiseList = [];
  console.log('componentFolders: ', componentFolders); // componsnts路径下所以的文件夹 组件
  console.log('sourcePath: ', sourcePath); // /components
  console.log('targetPath: ', targetPath); // /publish
  for (const dir of componentFolders) {
    // 每一个组件包下面有样式的才编译less
    if (await fs.pathExists(`${sourcePath}/${dir}/style/index.less`)) {
      // 将/components/组件/style样式文件 拷贝到/publish/组件/style
      await fs.copy(`${sourcePath}/${dir}/style`, `${targetPath}/${dir}/style`);
      // Compile less files to CSS and delete the `entry.less` file.
      const buildFilePath = `${sourcePath}/${dir}/style/entry.less`;
      const componentLess = await fs.readFile(buildFilePath, { encoding: 'utf8' });
      if (await fs.pathExists(buildFilePath)) {
        // Rewrite `entry.less` file with `root-entry-name`
        const entryLessFileContent = needTransformStyle(componentLess)
          ? `@root-entry-name: default;\n${componentLess}`
          : componentLess;
        // entry.less里的内容
        // @root-entry-name: default;
        // @import './index.less';
        // @import "./patch";
        console.log('entryLessFileContent: ', entryLessFileContent);
        // 编译未压缩版index.css
        promiseList.push(
          compileLess(
            entryLessFileContent,
            path.join(targetPath, dir, 'style', `index.css`),
            false,
            true,
            buildFilePath
          )
        );
        // 编译压缩版index.min.css
        promiseList.push(
          compileLess(
            entryLessFileContent,
            path.join(targetPath, dir, 'style', `index.min.css`),
            true,
            true,
            buildFilePath
          )
        );
      }
    }
  }

  console.log('拷贝样式');
  // 拷贝全局样式   把/components/style下的全局样式 拷贝到 /publish/style下面
  await fs.copy(path.resolve(sourcePath, 'style'), path.resolve(targetPath, 'style'));
  await fs.writeFile(`${targetPath}/components.less`, await fs.readFile(`${sourcePath}/components.less`));
  await fs.writeFile(`${targetPath}/ng-zorro-antd.less`, await fs.readFile(`${sourcePath}/ng-zorro-antd.less`));
  await fs.writeFile(
    `${targetPath}/ng-zorro-antd.dark.less`,
    await fs.readFile(`${sourcePath}/ng-zorro-antd.dark.less`)
  );
  await fs.writeFile(
    `${targetPath}/ng-zorro-antd.aliyun.less`,
    await fs.readFile(`${sourcePath}/ng-zorro-antd.aliyun.less`)
  );
  await fs.writeFile(
    `${targetPath}/ng-zorro-antd.compact.less`,
    await fs.readFile(`${sourcePath}/ng-zorro-antd.compact.less`)
  );

  await fs.writeFile(
    `${targetPath}/ng-zorro-antd.variable.less`,
    await fs.readFile(`${sourcePath}/ng-zorro-antd.variable.less`)
  );

  // 编译ng-zorro-antd.less
  const lessContent = `@import "${path.posix.join(targetPath, 'ng-zorro-antd.less')}";`;
  console.log(lessContent); //@import "磁盘路径/publish/ng-zorro-antd.less";
  promiseList.push(compileLess(lessContent, path.join(targetPath, 'ng-zorro-antd.css'), false));
  promiseList.push(compileLess(lessContent, path.join(targetPath, 'ng-zorro-antd.min.css'), true));

  // 编译 ng-zorro-antd.dark.less
  const darkLessContent = `@import "${path.posix.join(targetPath, 'ng-zorro-antd.dark.less')}";`;
  promiseList.push(compileLess(darkLessContent, path.join(targetPath, 'ng-zorro-antd.dark.css'), false));
  promiseList.push(compileLess(darkLessContent, path.join(targetPath, 'ng-zorro-antd.dark.min.css'), true));

  // 编译  ng-zorro-antd.compact.less
  const compactLessContent = `@import "${path.posix.join(targetPath, 'ng-zorro-antd.compact.less')}";`;
  promiseList.push(compileLess(compactLessContent, path.join(targetPath, 'ng-zorro-antd.compact.css'), false));
  promiseList.push(compileLess(compactLessContent, path.join(targetPath, 'ng-zorro-antd.compact.min.css'), true));

  // 编译 ng-zorro-antd.aliyun.less
  const aliyunLessContent = `@import "${path.posix.join(targetPath, 'ng-zorro-antd.aliyun.less')}";`;
  promiseList.push(compileLess(aliyunLessContent, path.join(targetPath, 'ng-zorro-antd.aliyun.css'), false));
  promiseList.push(compileLess(aliyunLessContent, path.join(targetPath, 'ng-zorro-antd.aliyun.min.css'), true));

  // 编译 ng-zorro-antd.variable.less
  const variableLessContent = `@import "${path.posix.join(targetPath, 'ng-zorro-antd.variable.less')}";`;
  promiseList.push(compileLess(variableLessContent, path.join(targetPath, 'ng-zorro-antd.variable.css'), false));
  promiseList.push(compileLess(variableLessContent, path.join(targetPath, 'ng-zorro-antd.variable.min.css'), true));

  // Compile css file that doesn't have component-specific styles.
  const cssIndexPath = path.join(sourcePath, 'style', 'entry.less');
  console.log(cssIndexPath); // /磁盘全路径/ng-zorro-antd/components/style/entry.less
  const cssIndex = await fs.readFile(cssIndexPath, { encoding: 'utf8' });
  // Rewrite `entry.less` file with `root-entry-name`
  const entryLessInStyle = needTransformStyle(cssIndex) ? `@root-entry-name: default;\n${cssIndex}` : cssIndex;
  console.log(entryLessInStyle); // @root-entry-name: default;
  // 编译全局style样式
  promiseList.push(
    compileLess(entryLessInStyle, path.join(targetPath, 'style', 'index.css'), false, true, cssIndexPath)
  );
  promiseList.push(
    compileLess(entryLessInStyle, path.join(targetPath, 'style', 'index.min.css'), true, true, cssIndexPath)
  );
  return Promise.all(promiseList).catch(e => console.log(e));
}

function needTransformStyle(content: string): boolean {
  return (
    content.includes('../../style/index.less') || content.includes('./index.less') || content.includes('/entry.less')
  );
}

```