前端 – 岁月细碎点滴快查 https://blog.mutadecheng.com Wed, 31 Dec 2025 00:58:56 +0000 zh-Hans hourly 1 https://wordpress.org/?v=6.9 Arm 搭建一套传感器采集系统(基于docker) https://blog.mutadecheng.com/2025/09/11/arm-%e6%90%ad%e5%bb%ba%e4%b8%80%e5%a5%97%e4%bc%a0%e6%84%9f%e5%99%a8%e9%87%87%e9%9b%86%e7%b3%bb%e7%bb%9f%e5%9f%ba%e4%ba%8edocker/ Thu, 11 Sep 2025 07:28:57 +0000 https://blog.mutadecheng.com/?p=362 架构:

数据库: questdb

前端:blazor server

后端:c#控制台(hostserver)

平台运维:portainer

容器管理

# 国外
docker run -d -p 9000:9000 \
  --name portainer \
  --restart=always \
  -v /var/run/docker.sock:/var/run/docker.sock \
  -v portainer_data:/data \
  portainer/portainer-ce:alpine-sts
  
# 国内(Arm64)
docker run -d -p 9000:9000 \
  --name portainer \
  --restart=always \
  -v /var/run/docker.sock:/var/run/docker.sock \
  -v portainer_data:/data \
  registry.cn-beijing.aliyuncs.com/muta/portainer-ce:alpine-sts-arm64

# 国内(Amd64)
docker run -d -p 9000:9000 \
  --name portainer \
  --restart=always \
  -v /var/run/docker.sock:/var/run/docker.sock \
  -v portainer_data:/data \
  registry.cn-beijing.aliyuncs.com/muta/portainer-ce:alpine-sts-amd64

数据库安装

# 国外
docker run -d \
  --name questdb \
  -p 8812:8812 \
  -p 9080:9000 \
  -p 9009:9009 \
  -v questdb_data:/root/.questdb/db \
  questdb/questdb:nightly-rhel
  
# 国内(Arm64)
docker run -d \
  --name questdb \
  -p 8812:8812 \
  -p 9080:9000 \
  -p 9009:9009 \
  -v questdb_data:/root/.questdb/db \
  registry.cn-beijing.aliyuncs.com/muta/questdb:nightly-rhel-arm64

# 国内(Amd64)
docker run -d \
  --name questdb \
  -p 8812:8812 \
  -p 9080:9000 \
  -p 9009:9009 \
  -v questdb_data:/root/.questdb/db \
  registry.cn-beijing.aliyuncs.com/muta/questdb:nightly-rhel-amd64

rabbitmq

version: '3.8'

services:
  mq:
    image: registry.cn-beijing.aliyuncs.com/muta/rabbitmq:management-arm64 
    restart: always 
    volumes:
      - rabbitmq_data:/var/lib/rabbitmq    # 持久化RabbitMQ数据
    ports:
      - "5672:5672"                        # AMQP协议端口，应用程序连接用
      - "15672:15672"                      # 管理后台端口，Web管理界面用
      # 以下端口仅在集群或特殊情况下需要，可选
      # - "25672:25672"                    # 节点间通信端口（集群用）
      # - "4369:4369"                      # Erlang节点发现端口（集群用）
    logging:
      driver: "json-file"
      options:
        max-size: "100m"
        max-file: "3" 

volumes:
  rabbitmq_data:                           # 定义持久化数据卷

采集程序(方案1)

version: '3.8'

services:
  armcollection2025masablazorapp:
    image: registry.cn-beijing.aliyuncs.com/dfzh/armcollection2025masablazorapp:latest
    ports:
      - "20000:8080"
    user: root
    devices:
      - /dev/ttyS3:/dev/ttyS3
    environment: 
      SqlSugar__1__ConnectionString: "host=host.docker.internal;port=8812;username=admin;password=quest;database=qdb;ServerCompatibilityMode=NoTypeLoading;"
    restart: always
    volumes: 
      - /home/orangepi/DataProtection-Keys/:/app/.aspnet/DataProtection-Keys
    logging:
      driver: "json-file"
      options:
        max-size: "100m"
        max-file: "3"

采集程序(方案2)

version: '3.8'

services:
  app:
    image: registry.cn-beijing.aliyuncs.com/dfzh/armcollectblazorapp:latest
    network_mode: "host" 
    environment:  
      Urls: "http://*:20000"
    restart: always 
    logging:
      driver: "json-file"
      options:
        max-size: "100m"
        max-file: "3"
        
  serialport2questdb:
    image: registry.cn-beijing.aliyuncs.com/dfzh/armcollectserialport2questdb:latest
    network_mode: "host" 
    user: root
    devices:
      - /dev/ttyS3:/dev/ttyS3
    environment:  
      ComPortName : "/dev/ttyS3"
      Urls: "http://*:20002" 
    restart: always 
    logging:
      driver: "json-file"
      options:
        max-size: "100m"
        max-file: "3"
version: '3.8'

services:
  app:
    image: registry.cn-beijing.aliyuncs.com/dfzh/staticforcecalibration-blazorserver:arm64
    restart: always 
    volumes:
      - /home/bjgrst/staticforcecalibration_data:/app/App_Data     
      - /home/bjgrst/DefaultSeedsJsonFiles/:/app/DefaultSeedsJsonFiles
      - /dev:/dev
    ports:
      - "8080:8080"      
    user: root
    privileged: true
    logging:
      driver: "json-file"
      options:
        max-size: "100m"
        max-file: "3"
]]> Blazor 项目中集成 NPM 包与 TypeScript，并用 ESBuild 打包的实战与原理 https://blog.mutadecheng.com/2025/07/14/blazor-%e9%a1%b9%e7%9b%ae%e4%b8%ad%e9%9b%86%e6%88%90-npm-%e5%8c%85%e4%b8%8e-typescript%ef%bc%8c%e5%b9%b6%e7%94%a8-esbuild-%e6%89%93%e5%8c%85%e7%9a%84%e5%ae%9e%e6%88%98%e4%b8%8e%e5%8e%9f%e7%90%86/ Mon, 14 Jul 2025 09:22:13 +0000 https://blog.mutadecheng.com/?p=339 一、ESM 与 UMD 模块格式的区别

现代 JavaScript 生态主要有两种流行的模块格式：ESM（ECMAScript Module）和 UMD（Universal Module Definition）。

1. ESM（ECMAScript Module）

  • 使用 import 和 export 关键字进行模块组织。
  • 加载方式为静态加载，编译时即可确定依赖关系。
  • 适用于现代浏览器和支持 ES Module 的 Node.js 版本。
  • 支持 Tree Shaking，未被引用的代码可在打包时去除，减小体积。
  • 依赖关系明确，易于优化和静态分析。
  • 原生支持异步加载（浏览器端）。
  • 常见扩展名为 .mjs 或 .js。

示例：

// a.js
export function foo() {}

// b.js
import { foo } from './a.js';

2. UMD（Universal Module Definition）

  • 兼容 CommonJS、AMD 和浏览器全局变量等多种模块系统。
  • 运行时自动判断当前环境（Node.js、浏览器、AMD）。
  • 几乎可在所有 JS 环境下直接使用，包括老旧浏览器。
  • 最大的优点是兼容性好，可以直接用 <script> 标签引入。
  • 缺点是不能静态分析依赖，Tree Shaking 效果差，体积略大。

示例：

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    define([], factory);
  } else if (typeof module === 'object' && module.exports) {
    module.exports = factory();
  } else {
    root.myLib = factory();
  }
}(this, function () {
  return {};
}));

3. 对比总结

特点ESMUMD
兼容性现代浏览器/Node.js各种环境（浏览器、Node等）
语法import/export兼容多种模块系统
Tree Shaking支持不支持
用途新项目推荐兼容老环境或全局变量场景

二、Blazor 与 ESM/UMD 的集成限制

Blazor 是微软推出的 Web 前端开发框架，支持 C# 编写客户端逻辑，分为 Blazor WebAssembly 和 Blazor Server 两种模式。Blazor 本身可以通过 JS interop 机制与 JavaScript 交互，但在集成现代 JS 库时存在以下局限：

1. Blazor 的 JS 交互方式

  • 只能通过 JS interop 调用全局作用域下的 JS 函数（即挂在 window 上的方法）。
  • 无法直接使用 import 语法动态加载 ESM 模块（除非用 <script type="module"> 并手动挂载到 window）。
  • 不能像 React/Vue 那样直接使用 NPM 包或通过模块系统自动管理依赖。

2. ESM/UMD 直接集成的障碍

  • ESM 格式的库必须通过 import 加载，Blazor 无法直接识别，也无法在 C# 代码中直接调用。
  • UMD 虽可全局挂载，但许多 UMD 库默认不会主动把 API 挂到 window，需要额外封装。
  • Blazor 的 JS interop 通信方式决定了只能通过全局对象与 JS 交互，无法像前端框架一样灵活集成 NPM 生态。

3. 正确的集成方式

  • 手动引入 JS 文件：在 wwwroot/index.html 用 <script> 标签引入 UMD 格式库，并确保需要的 API 挂载到 window。
  • 封装全局 JS 方法：写一段 JS 代码，把第三方库的核心方法挂到 window，便于 Blazor 调用。
  • 如果必须使用 ESM，需用 <script type="module"> 并手动挂到 window，否则 Blazor 访问不到。

示例：

<script src="your-umd-lib.js"></script>
<script>
  window.myLib = window.myLib || {}; // 确保全局可访问
</script>

Blazor 代码则通过 JS interop 调用 window.myLib.xxx 方法。

三、在 Blazor 中集成 NPM 包与 TypeScript 的现代实践

面对 ESM/UMD 集成难题，推荐以下现代化方案：

上述
Parse error on line 1:
上述
^
Expecting 'NEWLINE', 'SPACE', 'GRAPH', got 'UNICODE_TEXT'
flowchart TD
    A[开始：Blazor 项目] --> B[NPM 安装 esbuild 和所需 JS 库]
    B --> C[编写 TypeScript 文件<br>（如 Scripts/components.ts）]
    C --> D[在 package.json 配置 esbuild 打包脚本]
    D --> E[运行 npm run debugBuild / releaseBuild]
    E --> F[esbuild 打包 TypeScript 和 NPM 依赖<br>输出到 wwwroot/js/components.js]
    F --> G[Blazor 组件中通过 JS Interop 动态 import]
    G --> H[调用 JS 方法实现 C# 与 JS 互操作]
    H --> I[自动化集成到 .csproj 构建流程]
    I --> J[完成]

1. 使用 ESBuild 编译 TypeScript 和打包 NPM 依赖

的法国队
Parse error on line 1:
的法国队
^
Expecting 'NEWLINE', 'SPACE', 'GRAPH', got 'UNICODE_TEXT'
  • 在项目根目录下用 NPM 安装 ESBuild 和所需的 JS 库。
  • 在 Scripts 目录下编写 TypeScript 集成代码，导入 NPM 包并封装为供 Blazor 调用的全局方法。
  • 在 package.json 配置 ESBuild 打包脚本，输出为 ESM 格式的单一 JS 文件到 wwwroot/js。
  • Blazor 组件通过 IJSRuntime 动态导入打包后的模块，直接调用自定义方法。

关键脚本示例：

"scripts": {
    "debugBuild": "esbuild ./Scripts/components.ts --format=esm --bundle --sourcemap --outdir=wwwroot/js",
    "releaseBuild": "esbuild ./Scripts/components.ts --format=esm --bundle --sourcemap --minify --outdir=wwwroot/js"
}

2. 自动化集成到 .NET 构建流程

  • 在 .csproj 文件中添加 NPM 安装和打包任务，确保每次 dotnet build 或 dotnet run 时自动完成依赖安装和打包。

示例：

<Target Name="NPM Install" AfterTargets="PreBuildEvent">
    <Exec Command="npm install" />
</Target>
<Target Name="NPM Debug Build" AfterTargets="NPM Install" Condition="$(Configuration) == 'DEBUG'">
    <Exec Command="npm run debugBuild" />
</Target>
<Target Name="NPM Release Build" AfterTargets="NPM Install" Condition="$(Configuration) == 'RELEASE'">
    <Exec Command="npm run releaseBuild" />
</Target>

3. Blazor 组件调用方式

  • 通过 IJSRuntime.InvokeAsync<IJSObjectReference>("import", "./js/components.js") 动态加载模块。
  • 直接调用打包后暴露的 JS 方法，实现 C# 与 JS 的高效互操作。

四、总结

ESM 格式适合现代前端开发，支持静态分析和 Tree Shaking，但不支持直接在 Blazor 中模块化调用。UMD 格式兼容性强，可通过全局变量方式间接集成到 Blazor，但需要手动挂载 API。通过引入 ESBuild 工具，将 TypeScript 和所有 NPM 依赖打包为适合 Blazor 动态加载的 ESM 文件，并结合 JS interop 机制，Blazor 项目能够高效利用现代 JavaScript 生态，实现类型安全、依赖清晰的前后端集成开发。

五、引用资料

1.博客:Using ESBuild with Blazor

]]>