构建产物介绍

简介

包名	作用
cherry-markdown.js cherry-markdown.min.js	完整包，较大，包含cherry所有功能（工具栏、左侧编辑器、右侧预览器）
cherry-markdown.core.js	核心包，相比完整包，只少了mermaid功能，包大小小了50%以上 （当然也可以在引入核心包后再传入mermaid，从而实现对mermaid的支持）
cherry-markdown.engine.core.js	解析引擎包，可以理解为只提供了将md解析成html的api
cherry-markdown.css	样式文件，包括了编辑区、工具栏、预览区等样式
cherry-markdown.markdown.css	预览区内的样式文件，会对 class="cherry-markdown"元素里的html应用样式

前缀	后缀	模块	语言版本	UI	核心引擎	大体积依赖(mermaid等)	建议使用环境	免构建用于生产
cherry-markdown	.js	umd	es5	✅	✅	✅	Web	❌
cherry-markdown	.esm.js	esm	es2015	✅	✅	✅	Web	❌
cherry-markdown	.min.js	umd	es5	✅	✅	✅	Web	✅
cherry-markdown.core	.js	umd	es5	✅	✅	❌	Web	❌
cherry-markdown.core	.common.js	cjs	es5	✅	✅	❌	Node	❌
cherry-markdown.engine.core	.js	umd	es5	❌	✅	❌	Web	❌
cherry-markdown.engine.core	.esm.js	esm	es2015	❌	✅	❌	Web	❌
cherry-markdown.engine.core	.common.js	cjs	es5	❌	✅	❌	Node	❌

引入mermaid

cherry-markdown.js里包含了mermaid（V9.4.3），如果业务方有自己版本的mermaid，则可先使用cherry-markdown.core.js包，然后通过以下三种方式引入自己版本的mermaid。

方式一：定义window.mermaid属性

<...>
  <!-- 默认注入mermaid到window -->
  <script src="https://cdn.com/mermaid/dist/mermaid.min.js"></script>
  <script>
    import mermaidPlugin from 'cherry/dist/addons/cherry-code-block-mermaid-plugin';
    import cherry from 'cherry';
    cherry.usePlugin(mermaidPlugin); // 默认从 window.mermaid 获取
    new cherry();
  </script>
</...>

方式二：同步引入mermaid并传值给cherry

import mermaidPlugin from 'cherry/dist/addons/cherry-code-block-mermaid-plugin';
import cherry from 'cherry';
import mermaid from 'mermaid';
cherry.usePlugin(mermaidPlugin, { mermaid });
new cherry();

方式三：异步引入mermaid并传值给cherry

import mermaidPlugin from 'cherry/dist/addons/cherry-code-block-mermaid-plugin';
import cherry from 'cherry';

(async () => {
  const mermaid = await import('mermaid');
  cherry.usePlugin(mermaidPlugin, { mermaid });
  new cherry();
})()

引入echarts

import cherry from 'cherry';
import echarts from 'echarts';
import echartsEngine from 'cherry/dist/addons/advance/cherry-table-echarts-plugin';

cherry.usePlugin(echartsEngine , { echarts });
new cherry();