前言

Webpack实现TreeShaking

通过TerserWebpackPlugin对JS函数进行TreeShaking

下载依赖

1

npm install -D terser-webpack-plugin

修改配置文件

optimization.usedExports：对从未使用的函数通过魔法函数unused harmony export null进行标记，Terser会自动忽略具有标记的函数的打包

1
2
3
4
5
6
7
8
9
10
11

const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  optimization: {
    usedExports: true
  },
  minimize: true,
  minimizer: [
    new TerserPlugin()
  ]
};

通过PurgeCSSWebpackPlugin对CSS类进行TreeShaking

下载依赖

1

npm install -D purgecss-webpack-plugin glob

修改配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

const TerserPlugin = require("purgecss-webpack-plugin");
const glob = require("glob");

module.exports = {
  plugins: [
    new PurgecssPlugin({
      paths: glob.sync(`${path.resolve(__dirname, "../src")}/**/*`, { nodir: true }),
      safelist: function () {
        return {
          standard: ["body"]
        }
      }
    })
  ]
};

配置TreeShaking的白名单

• 默认所有import ""导入但是没有使用的模块都会被TreeShaking

• JS文件如果所有导出的模块都是纯函数，则无需配置或指定为false

sideEffects：指定需要Webpack忽略TreeShaking的文件，缺省值为false，表示没有需要忽略TreeShaking的文件

1
2
3

{
  "sideEffects": false
}

• JS文件如果导出的模块有非纯函数，具有副作用，则需要忽略这个JS文件的TreeShaking

1
2
3
4
5

{
  "sideEffects": [
    "./src/<file>.js"
  ]
}

• 忽略所有CSS文件的TreeShaking
  • 因为所有CSS文件的导入一定没有使用，都是import ""，所以需要忽略所有CSS文件的TreeShaking

1
2
3
4
5

{
  "sideEffects": [
    "*.css"
  ]
}

完成

前言

Codex配置Brave浏览器的MCP

准备工作

• Brave浏览器

通过调试模式启动浏览器

Windows

1

"C:\Program Files\BraveSoftware\Brave-Browser\Application\brave.exe" --remote-debugging-port=9222

MacOS

1

open -a "Brave Browser" --args --remote-debugging-port=9222

Codex添加MCP配置

通过命令配置

1

codex mcp add brave -- npx -y brave-mcp@latest --browser-url http://127.0.0.1:9222

通过配置文件配置

1
2
3

[mcp_servers.brave]
command = "npx"
args = ["-y", "brave-mcp@latest", "--browserUrl", "http://127.0.0.1:9222"]

完成

前言

Fast and simple Node.js version manager, built in Rust（Github）

fnm学习笔记

安装

MacOS

1

brew install fnm

• 添加环境变量

1

eval "$(fnm env --use-on-cd)"

Nodejs版本管理

安装指定的版本

<version>：版本号

1

fnm install <version>

安装最新版

1

fnm install --latest

安装最新LTS版

1

fnm install --lts

卸载指定的版本

1

fnm uninstall <version>

查看所有可以安装的版本

1

fnm list-remote

查看所有可以安装的LTS版

1

fnm list-remote --lts

查看已安装的版本

1

fnm ls

1

fnm list

切换当前使用的版本

1

fnm use <version>

1

fnm use --latest

1

fnm use --lts

查看当前使用的版本

1

fnm current

当前项目锁定版本

1

fnm local <version>

完成

前言

Codex配置IDEA的MCP

IDEA中安装插件

• 打开IDEA->Settings->Plugins->搜索并安装MCP Server

IDEA中启动MCP服务

• 打开IDEA->Settings->Tools->MCP Server->勾选Enable MCP Server->Enable->OK

修改Codex配置文件

通过配置文件配置

以HTTP的形式

1
2

[mcp_servers.idea]
url = "http://127.0.0.1:64342/stream"

以进程的形式

1
2
3
4
5
6
7
8

[mcp_servers.idea]
command = "/Applications/IntelliJ IDEA.app/Contents/jbr/Contents/Home/bin/java"
args = [
  "-classpath",
  "/Applications/IntelliJ IDEA.app/Contents/plugins/mcpserver/lib/mcpserver-frontend.jar:/Applications/IntelliJ IDEA.app/Contents/lib/util-8.jar:/Applications/IntelliJ IDEA.app/Contents/lib/module-intellij.libraries.ktor.client.cio.jar:/Applications/IntelliJ IDEA.app/Contents/lib/module-intellij.libraries.ktor.client.jar:/Applications/IntelliJ IDEA.app/Contents/lib/module-intellij.libraries.ktor.network.tls.jar:/Applications/IntelliJ IDEA.app/Contents/lib/module-intellij.libraries.ktor.io.jar:/Applications/IntelliJ IDEA.app/Contents/lib/module-intellij.libraries.ktor.utils.jar:/Applications/IntelliJ IDEA.app/Contents/lib/module-intellij.libraries.kotlinx.io.jar:/Applications/IntelliJ IDEA.app/Contents/lib/module-intellij.libraries.kotlinx.serialization.core.jar:/Applications/IntelliJ IDEA.app/Contents/lib/module-intellij.libraries.kotlinx.serialization.json.jar",
  "com.intellij.mcpserver.stdio.McpStdioRunnerKt",
]
env = { IJ_MCP_SERVER_PORT = "64342" }

完成

前言

Shared browser compatibility config for popular JavaScript tools like Autoprefixer, Babel, ESLint, PostCSS, and Webpack（官网）

下载依赖

1

npm install -D browserslist

获取需要兼容的浏览器版本

1

npx browserslist

添加需要兼容的浏览器配置

通过命令添加配置

• 多个浏览器版本配置用and或,分隔，表示并且关系

1

npx browserslist "> 0.5% and last 2 versions and Firefox ESR and not dead"

1

npx browserslist "> 0.5%, last 2 versions, Firefox ESR, not dead"

• 多个浏览器版本配置用or分隔，表示或者关系

1

npx browserslist "> 0.5% or last 2 versions or Firefox ESR or not dead"

• 通过not表示非关系

1

npx browserslist "not dead"

直接修改配置文件

• 每个浏览器版本配置占一行，表示或者关系

1
2
3
4

> 0.5%
last 2 versions
Firefox ESR
not dead

在Webpack+Babel中使用Browserslist

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              ["@babel/preset-env", {
                targets: "> 0.5%, last 2 versions, Firefox ESR, not dead"
              }]
            ]
          }
        }
      }
    ]
  }
};

完成

前言

OpenAI的Codex学习笔记

下载依赖

npm

1

npm install -g @openai/codex

MacOS

1

brew install codex

启动交互式终端

1

codex

登录

使用授权码登录

1

codex login --device-auth

ACP

下载依赖

npm

1

npm install -g @agentclientprotocol/codex-acp

MacOS

1

brew install codex-acp

启动ACP服务

1

codex-acp

MCP

查看所有MCP服务

1

codex mcp list

配置任意模型供应商

• 配置任意符合OpenAI接口协议的模型供应商

<provider_name>：供应商唯一标识
<provider_display_name>：供应商显示名
<url>：API的URL

model_provider：定义模型提供商
model：定义主模型
review_model：定义review模型，不填则使用主模型
model_reasoning_effort：定义推理模型的思考强度

"low"：低
"medium"：中
"high"：高
"xhigh"：最高

disable_response_storage：禁止响应内容保存本地

false：缺省值，允许响应内容保存本地
true：禁止响应内容保存本地

network_access：允许联网搜索

disabled：缺省值，禁止联网搜索
enabled：允许联网搜索

windows_wsl_setup_acknowledged = true：Windows的WSL确认弹窗跳过

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

model_provider = "<provider_name>"
model = "gpt-5.5"
review_model = "gpt-5.5"
model_reasoning_effort = "high"
disable_response_storage = false
network_access = "disabled"
windows_wsl_setup_acknowledged = true

[model_providers.<provider_name>]
name = "<provider_display_name>"
base_url = "<url>"
wire_api = "responses"
requires_openai_auth = true

[features]
goals = true

<api_key>：API的密钥

1
2
3

{
  "OPENAI_API_KEY": "<api_key>"
}

完成

前言

通过NapCat与QQ交互，通过AstrBot实现AI机器人，最终实现QQ机器人

准备工作

• 部署NapCat
• 部署AstrBot

NapCat创建WebSocket客户端

• 访问NapCat->网络配置->新建->Websocket客户端

• URL改为ws://127.0.0.1:6199/ws->复制Token->保存

AstrBot创建OneBot机器人

• 访问AstrBot->机器人->创建机器人

• 消息平台类别改为OneBot v11->反向 Websocket Token填写为上一步骤复制的Token->保存

NapCat启动WebSocket客户端

• 访问NapCat->网络配置->启动WebSocket客户端

• 此时AstrBot机器人的平台日志输出aiocqhttp(OneBot v11) 适配器已连接。表示成功建立连接

完成

参考文献

博客园——ljbguanli