当前位置: 首页 > news >正文

MarkDown基础及表格、KaTeX公式、矩阵、流程图、UML图、甘特图语法

概述

最多可设置6级标题

技巧

列表

有序列表

MD语法:

1. 你好
2. 我也好

呈现效果:

  1. 你好
  2. 我也好

无序列表

MD语法:

- a
- b
* aa
* bb
+ aaa
+ bbb

效果:

  • a
  • b
  • aa
  • bb
  • aaa
  • bbb

结论,支持三种方式:-*+

TODO列表

MD语法:

- [x] 后端接口开发
- [ ] 与前端联调

呈现效果:

  • 后端接口开发
  • 与前端联调

加粗斜体与删除线

MD语法:

*斜体*,_斜体1_,**加粗**,__加粗1__,***粗斜体***,**_粗斜体1_**,~~删除线~~ 

效果:
斜体斜体1加粗加粗1粗斜体粗斜体1删除线

结论:一个*_表示斜体,两个*_表示加粗,三个*_表示加粗斜体。

分割线

单独一行里输入3个或以上的短横线-、星号*或下划线_

引用、嵌套引用

一个>表示引用,两个>表示嵌套引用
效果:

鲁迅:我不见他,已是三十多年;今天见了,精神分外爽快。才知道以前的三十多年,全是发昏;然而须十分小心。不然,那赵家的狗,何以看我两眼呢?

嵌套引用

超链接

支持类HTML方式:
<a href="http_url" alt="提示文本">超链接1</a>
效果:超链接1

[超链接2](http_url "alt 提示")
效果:超链接2

表格

设置表格内容对齐

MD语法:

| 左对齐标题 | 右对齐标题 | 居中对齐标题 | 居中对齐标题
| :------| ------: | :------: | --
| 短文本 | 中等长度文本 | 稍微长一点的文本 | 稍微长一点的文本
| 稍微长一点的文本 | 短文本 | 中等文本 | 中等文本

效果

左对齐标题右对齐标题居中对齐标题居中对齐标题
短文本中等长度文本稍微长一点的文本稍微长一点的文本
稍微长一点的文本短文本中等文本中等文本

也就是说:两个横杠--即可代表一个列,默认是居中,故两侧的冒号:可以省略。冒号:加在左边,即表示左对齐;冒号加在右边,即表示右对齐。

设置表格内容换行

MD语法:

标题 | 我想要这个注释居中
:--|--
我想要这个标题左对齐 | 第一行<br>第二行

效果

标题我想要这个注释居中
我想要这个标题左对齐第一行
第二行

结论:<br>可以实现换行

设置表格内容合并

MD语法:

标题左对齐 | 我想要这个右对齐
:--|--:
合并的标题|第一行<hr>第二行

效果

标题左对齐我想要这个居中对齐我想要这个右对齐
合并的标题第一行第一列
第二行第一列
第一行第二列
有很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多第二行第二列

结论:<hr>可以实现其他列合并

但是比较丑!尤其是在表格内容长度不一的情况下。

表格里含有特殊字符

表格以|作为分隔符,那如果我想要在表格单元格里面添加|,如何实现?加上转义字符\即可。其他特殊字符也是一样的处理方式。

MD语法:

模式|解释
--|--
`p1\|p2`|交替匹配任意 p1 或 p2

效果

模式解释
p1|p2交替匹配任意 p1 或 p2

公式

Markdown Preview Enhanced使用KaTeX或MathJax来渲染数学表达式。KaTeX比MathJax性能更好,但却缺少很多MathJax拥有的特性。

两种公式编写方式:

  • $...$\(...\)中的数学表达式将会在行内显示
  • $$...$$\[...\]或```math中的数学表达式将会在块内显示

常用符号

下标:$a_{11}$,呈现效果: a 11 a_{11} a11
上标:$a^{11}$,呈现效果: a 12 a^{12} a12
分数:$\frac{a}{b}$,呈现效果 a b \frac{a}{b} ba
向量:$\vec{a}$,呈现效果: a ⃗ \vec{a} a
累加:$\sum$,呈现效果: ∑ \sum
累积:$\prod$,呈现效果: ∏ \prod
无穷大:$\infty$,呈现效果: ∞ \infty
1重积分:$\int\frac{dx}{1+x^2}=arctanx+C$,呈现效果: ∫ d x 1 + x 2 = a r c t a n x + C \int\frac{dx}{1+x^2}=arctanx+C 1+x2dx=arctanx+C
2重积分:$\iint$,呈现效果: ∬ \iint
3重积分:$\iiint$,呈现效果: ∭ \iiint

微分:

希腊字母

字母markdown语法呈现效果
alpha$\alpha$ α \alpha α
beta$\beta$ β \beta β
gamma$\gamma$ γ \gamma γ
delta$\delta$ δ \delta δ
epsilon$\epsilon$ ϵ \epsilon ϵ
zeta$\zeta$ ζ \zeta ζ
eta$\eta$ η \eta η
theta$\theta$ θ \theta θ
lambda$\lambda$ λ \lambda λ
pi$\pi$ π \pi π
omega$\omega$ ω \omega ω
psi$\psi$ ψ \psi ψ
sigma$\sigma$ σ \sigma σ
rho$\rho$ ρ \rho ρ
xi$\xi$ ξ \xi ξ
tau$\tau$ τ \tau τ
kappa$\kappa$ κ \kappa κ
mu$\mu$ μ \mu μ
nu$\nu$ ν \nu ν
chi$\chi$ χ \chi χ
upsilon$\upsilon$ υ \upsilon υ

实战

实例语法:


呈现效果:
( 1 + x ) a (1+x)^a (1+x)a

方程组

起始、结束处以{cases}声明

示例:

$$\begin{cases}
a_1x+b_1y+c_1z=d_1\\
a_2x+b_2y+c_2z=d_2\\
a_3x+b_3y+c_3z=d_3\\
\end{cases}
$$

呈现效果:
{ a 1 x + b 1 y + c 1 z = d 1 a 2 x + b 2 y + c 2 z = d 2 a 3 x + b 3 y + c 3 z = d 3 \begin{cases} a_1x+b_1y+c_1z=d_1\\ a_2x+b_2y+c_2z=d_2\\ a_3x+b_3y+c_3z=d_3\\ \end{cases} a1x+b1y+c1z=d1a2x+b2y+c2z=d2a3x+b3y+c3z=d3

矩阵

基础

矩阵MD语法规则:

  • 数学公式(包括矩阵)放在$$之间
  • 起始标记\begin{matrix},结束标记\end{matrix}
  • 行尾标记\\,行间元素用&分隔

示例语法:

$$\begin{matrix}
0.8&0.2\\
0.4&0.6\\
\end{matrix}$$

呈现效果:
0.8 0.2 0.4 0.6 \begin{matrix} 0.8&0.2\\ 0.4&0.6\\ \end{matrix} 0.80.40.20.6

矩阵边框

上面的预览没有边框。在起始、结束标记用下列词替换matrix

  • pmatrix:小括号边框
  • bmatrix:中括号边框
  • Bmatrix:大括号边框
  • vmatrix:单竖线边框
  • Vmatrix:双竖线边框

呈现效果:
[ 0.8 0.2 0.4 0.6 ] \begin{bmatrix} 0.8&0.2\\ 0.4&0.6\\ \end{bmatrix} [0.80.40.20.6]

省略元素

当矩阵元素较多且呈现一定规律时会使用省略号:

  • 横省略号:\cdots
  • 竖省略号:\vdots
  • 斜省略号:\ddots

示例:

$$A=\begin{Bmatrix}
{a_{11}}&{a_{12}}&{\cdots}&{a_{1n}}\\
{a_{21}}&{a_{22}}&{\cdots}&{a_{2n}}\\
{\vdots}&{\vdots}&{\ddots}&{\vdots}\\
{a_{m1}}&{a_{m2}}&{\cdots}&{a_{mn}}\\
\end{Bmatrix}$$

呈现效果:
A = { a 11 a 12 ⋯ a 1 n a 21 a 22 ⋯ a 2 n ⋮ ⋮ ⋱ ⋮ a m 1 a m 2 ⋯ a m n } A=\begin{Bmatrix} {a_{11}}&{a_{12}}&{\cdots}&{a_{1n}}\\ {a_{21}}&{a_{22}}&{\cdots}&{a_{2n}}\\ {\vdots}&{\vdots}&{\ddots}&{\vdots}\\ {a_{m1}}&{a_{m2}}&{\cdots}&{a_{mn}}\\ \end{Bmatrix} A= a11a21am1a12a22am2a1na2namn

阵列

规则:

  • 包含:起始、结束处以{array}声明
  • 对齐方式:在{array}后以{}逐行统一声明
  • 左对齐:l;居中:c;右对齐:r
  • 竖直线:在声明对齐方式时,插入|建立竖直线
  • 插入水平线:\hline

示例:

$$\begin{array}{c|lll}
{↓}&{a}&{b}&{c}\\
\hline
{R_1}&{c}&{b}&{a}\\
{R_2}&{b}&{c}&{c}\\
\end{array}$$

呈现效果:
↓ a b c R 1 c b a R 2 b c c \begin{array}{c|lll} {↓}&{a}&{b}&{c}\\ \hline {R_1}&{c}&{b}&{a}\\ {R_2}&{b}&{c}&{c}\\ \end{array} R1R2acbbbccac

流程图

横向流程图

复制下面代码时去掉【晕】字,下同:

```mermaid
graph LR
A[方形] -->B(圆角)
B --> C{条件a}
C -->|a=1| D[结果1]
C -->|a=2| E[结果2]
F[横向流程图]
晕```

呈现效果:

a=1
a=2
方形
圆角
条件a
结果1
结果2
横向流程图

竖向流程图

```mermaid
graph TD
A[方形] --> B(圆角)
B --> C{条件a}
C --> |a=1| D[结果1]
C --> |a=2| E[结果2]
F[竖向流程图]
晕```

呈现效果:

a=1
a=2
方形
圆角
条件a
结果1
结果2
竖向流程图

标准流程图

示例:

```mermaid
flowchat
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
晕```

呈现效果:

Created with Raphaël 2.3.0 开始框 处理框 判断框(是或否?) 输入输出框 结束框 子流程 yes no

UML时序图

示例:

```mermaid
sequenceDiagram
对象A->>对象B: 对象B你好吗?(请求)
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->>对象A: 我很好(响应)
对象A->>对象B: 你真的好吗?
晕```

呈现效果:

对象A 对象B 对象B你好吗?(请求) 对象B的描述 对象A的描述(提示) 我很好(响应) 你真的好吗? 对象A 对象B 标题:复杂UML时序图

稍微复杂一点的时序图示例:

```mermaid
sequenceDiagram
Title: 标题:复杂UML时序图
对象A->>对象B: 对象B你好吗?(请求)
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->>对象A: 我很好(响应)
对象B->>小三: 你好吗
小三-->>对象A: 对象B找我了
对象A->>对象B: 你真的好吗?
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩
晕```

呈现效果:

对象A 对象B 小三 C 对象B你好吗?(请求) 对象B的描述 对象A的描述(提示) 我很好(响应) 你好吗 对象B找我了 你真的好吗? 我们是朋友 没人陪我玩 对象A 对象B 小三 C 标题:复杂UML时序图

甘特图

示例:

```mermaid
ganttdateFormat  YYYY-MM-DDtitle 软件开发甘特图示例section 设计需求                      :done,    des1, 2023-11-06,2023-11-08原型                      :active,  des2, 2023-11-09, 3dUI设计                     :         des3, after des2, 5d未来任务                     :         des4, after des3, 5dsection 开发学习准备理解需求                      :crit, done, 2023-11-06,24h设计框架                             :crit, done, after des2, 2d开发                                 :crit, active, 3d未来任务                              :crit, 5d耍                                   :2dsection 测试功能测试                              :active, a1, after des3, 3d压力测试                               :after a1  , 20h测试报告                               : 48h
晕```

呈现效果:

2023-11-07 2023-11-09 2023-11-11 2023-11-13 2023-11-15 2023-11-17 2023-11-19 2023-11-21 2023-11-23 需求 学习准备理解需求 原型 UI设计 设计框架 开发 未来任务 未来任务 功能测试 压力测试 测试报告 设计 开发 测试 软件开发甘特图示例

参考

  • KaTeX-GitHub
  • KaTeX
  • MathJax-GitHub
  • MathJax

相关文章:

MarkDown基础及表格、KaTeX公式、矩阵、流程图、UML图、甘特图语法

概述 最多可设置6级标题 技巧 列表 有序列表 MD语法&#xff1a; 1. 你好 2. 我也好呈现效果&#xff1a; 你好我也好 无序列表 MD语法&#xff1a; - a - b * aa * bbaaabbb效果&#xff1a; ab aabb aaabbb 结论&#xff0c;支持三种方式&#xff1a;-、*、 T…...

Citespace的使用

CiteSpace CiteSpace的相关介绍运行CiteSpace CiteSpace的相关介绍 CiteSpace作为一款优秀的文献计量学软件&#xff0c;能够将文献之间的关系以科学知识图谱的方式可视化地展现在我们面前。简单来说&#xff0c;面对海量的文献&#xff0c;CiteSpace能够迅速锁定自己需要关注…...

[模块]ES6与cjs的混合开发

[模块]ES6与cjs的混合开发 模块语言混合开发的原因Nodejs中使用ES6关于动态加载的讲解 项目的模块语言CJS 与 ESM 开发模块的使用方法普通模块引入json 文件的引入普通模块导出 CJS兼容ESMESM兼容CJS(推荐)全局变量--dirname-filename-esm库 问题Error: EPERM: operation not p…...

git上传项目至github(Linux)

01 git版本创建 git init 创建版本库 创建一个版本 git add test1.cpp git commit -m 说明信息 git log 查看版本记录 02 版本回退 git reset --hard HEAD^ 版本回退一个 git reset --hard HEAD^^ 版本回退二个 git reset --hard 版本号 版本回退到指定版本&#xff0…...

SSH 远程登录 WSL

更新ssh设置 sudo apt-get update sudo apt-get remove openssh-server sudo apt-get install openssh-server 编辑网络配置 sudo vi /etc/ssh/sshd_config &#xff08;1&#xff09;修改ssh服务监听端口和监听地址 注意&#xff1a;为了个人的安全&#xff0c;还是建议换…...

每天一道算法题:40. 组合总和 II

难度 中等 题目 给定一个候选人编号的集合 candidates 和一个目标数 target &#xff0c;找出 candidates 中所有可以使数字和为 target 的组合。 candidates 中的每个数字在每个组合中只能使用 一次 。 注意&#xff1a;解集不能包含重复的组合。 示例 1: 输入: candidat…...

Centos7安装PostgreSQL 14

环境&#xff1a; Centos7安装PostgreSQL_14版本数据库&#xff1b; 打开官方网站&#xff1a;PostgreSQL: Linux downloads (Red Hat family) 一、 版本选择 复制、粘贴并运行如下脚本&#xff1a; 二、安装步骤 这些命令是在 CentOS 7.x 系统上安装和配置 PostgreSQL 14 的步…...

Shopee的折扣活动怎么分类?shopee设置折扣注意事项

旺季到来&#xff0c;Shopee会举办一些折扣活动来吸引客户&#xff0c;那么shopee的折扣活动怎么分类&#xff0c;shopee设置折扣注意事项&#xff1f; shopee的折扣活动怎么分类&#xff1f; 满减活动&#xff1a;满减活动是虾皮常见的一种折扣形式。在这种活动中&#xff0…...

磁盘空间占用巨大的meta.db-wal文件缓存(tracker-miner-fs索引服务)彻底清除办法

磁盘命令参考本博客linux磁盘空间满了怎么办. 问题: 磁盘空间被盗 今天瞄了一下我的Ubuntu系统盘&#xff0c; nftdiggernftdigger-Ubuntu:~$ df -h 文件系统 容量 已用 可用 已用% 挂载点 udev 16G 0 16G 0% /dev tmpfs 3.2G 1.9…...

力扣:160. 相交链表(Python3)

题目&#xff1a; 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交&#xff1a; 题目数据 保证 整个链式结构中不存在环。 注意&#xff0c;…...

【华为OD机试AB高分必刷题目】无名的搜索题(Java-优先搜索(DFS)实现)

🚀你的旅程将在这里启航!本专栏所有题目均包含优质解题思路,高质量解题代码,详细代码讲解,助你深入学习,高分通过! 文章目录 【华为OD机试AB高分必刷题目】无名的搜索题(Java-优先搜索(DFS)实现)题目描述解题思路Java题解代码代码OJ评判结果代码讲解寄语【华为OD机…...

ant 任务(task)通过内嵌的arg元素传递命令行参数

有的ant 任务将参数传递给其它的进程作为命令行参数。这可以通过内嵌的arg元素来实现。 例如&#xff1a; <exec executable"${browser}" spawn"true"><arg value"${file}"/> </exec>arg元素的部分属性说明&#xff1a; val…...

STM32G0+EMW3080+阿里云飞燕平台实现单片机WiFi智能联网功能(三)STM32G0控制EMW3080实现IoT功能

项目描述&#xff1a;该系列记录了STM32G0EMW3080实现单片机智能联网功能项目的从零开始一步步的实现过程&#xff1b;硬件环境&#xff1a;单片机为STM32G030C8T6&#xff1b;物联网模块为EMW3080V2-P&#xff1b;网联网模块的开发板为MXKit开发套件&#xff0c;具体型号为XCH…...

IntelliJ IDEA - Git Commit 后 Commit 窗口不消失解决方案

这个现象是在 2023 年版本后开始的&#xff0c;一开始以为是 Mac 系统的原因&#xff0c;后来发现原来 Windows 也这样&#xff0c;所以应该只跟 IDEA 版本有关 可以看到左侧 commit 后&#xff0c;这个侧边栏还在&#xff0c;按理讲在以前的版本是之前消失&#xff0c;这样使…...

Vue 组件化编程 和 生命周期

目录 一、组件化编程 1.基本介绍 : 2.原理示意图 : 3.全局组件示例 : 4.局部组件示例 : 5.全局组件和局部组件的区别 : 二、生命周期 1.基本介绍 : 2.生命周期示意图 : 3.实例测试 : 一、组件化编程 1.基本介绍 : (1) 开发大型应用的时候&#xff0c;页面往往划分成…...

《数字图像处理-OpenCV/Python》连载(41)图像的旋转

《数字图像处理-OpenCV/Python》连载&#xff08;41&#xff09;图像的旋转 本书京东优惠购书链接&#xff1a;https://item.jd.com/14098452.html 本书CSDN独家连载专栏&#xff1a;https://blog.csdn.net/youcans/category_12418787.html 第 6 章 图像的几何变换 几何变换分…...

案例 - 拖拽上传文件,生成缩略图

直接看效果 实现代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>拖拽上传文件</title>&l…...

PHP 使用递归方式 将其二维数组整合为层级树 其中层级id 为一个uuid的格式 造成的诡异问题 已解决

不啰嗦 直接上源代码 <?php function findChildren($list, $p_id){$r array();foreach ($list as $k > $item) {if ($item[fid] $p_id) {unset($list[$k]);$length count($r);$r[$length] $item;if ($t findChildren($list, $item[id])) {$r[$length][children] …...

rv1126-rv1109-添加分区,定制固件,开机挂载功能

===================================================================== 修改分区: 这里是分区的txt文件选择; 这里是分区的划分,我这里回车了,方便看 FIRMWARE_VER: 8.1 MACHINE_MODEL: RV1126 MACHINE_ID: 007 MANUFACTURER: RV1126 MAGIC: 0x5041524B ATAG: 0x00200…...

一台电脑使用多个gitee账号,以及提交忽略部分文件

目录 ​编辑 一&#xff1a;前言 二&#xff1a;解决方法 三&#xff1a;提交gitee时忽略文件 一&#xff1a;前言 在开发中&#xff0c;我们拥有不止一个 gitee 账号&#xff0c;通常而言一个是公司的&#xff0c;一个是私人的。有时候我们在公司写了一些自己的东西&#…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

css实现圆环展示百分比,根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

LangChain【6】之输出解析器:结构化LLM响应的关键工具

文章目录 一 LangChain输出解析器概述1.1 什么是输出解析器&#xff1f;1.2 主要功能与工作原理1.3 常用解析器类型 二 主要输出解析器类型2.1 Pydantic/Json输出解析器2.2 结构化输出解析器2.3 列表解析器2.4 日期解析器2.5 Json输出解析器2.6 xml输出解析器 三 高级使用技巧3…...

__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined.

这个警告表明您在使用Vue的esm-bundler构建版本时&#xff0c;未明确定义编译时特性标志。以下是详细解释和解决方案&#xff1a; ‌问题原因‌&#xff1a; 该标志是Vue 3.4引入的编译时特性标志&#xff0c;用于控制生产环境下SSR水合不匹配错误的详细报告1使用esm-bundler…...