echarts 的版本与引入问题

[foxfire881]

1、请问 0.10.3 版应该引入哪个版本的 echarts ? 早期的版本用的是 echarts 4.9.15， 但是现在 nodejs 官网上已经没有这个版本的 echarts 了，只有下面这些版本，引入最新的 6.0.0 版会报错

[
  '2.2.1-amd-beta1', '2.2.7-amd-beta1', '2.2.7-amd-beta2', '2.2.7-beta7',
  '2.2.8',           '3.0.0-beta1',     '3.0.0-beta2',     '3.0.0-beta3',
  '3.0.0-beta4',     '3.0.0',           '3.0.1',           '3.0.2-beta1',
  '3.0.2-beta2',     '3.0.2-beta3',     '3.1.1',           '3.1.2',
  '3.1.3',           '3.1.4',           '3.1.5',           '3.1.6',
  '3.1.7',           '3.1.8',           '3.1.9',           '3.1.10',
  '3.2.0',           '3.2.1',           '3.2.2',           '3.2.3',
  '3.3.0',           '3.3.1',           '3.3.2',           '3.4.0',
  '3.5.0',           '3.5.1',           '3.5.2',           '3.5.3',
  '3.5.4',           '3.6.0',           '3.6.1',           '3.6.2',
  '3.7.0',           '3.7.1',           '3.7.2',           '3.8.0',
  '3.8.1',           '3.8.2',           '3.8.3',           '3.8.4',
  '3.8.5',           '4.0.0',           '4.0.1',           '4.0.2',
  '4.0.3',           '4.0.4',           '4.1.0',           '4.2.0-rc.1',
  '4.2.0-rc.2',      '4.2.1-rc.1',      '4.2.1-rc.2',      '4.2.1-rc.3',
  '4.2.1',           '4.3.0-rc.1',      '4.3.0-rc.2',      '4.3.0',
  '4.4.0-rc.1',      '4.4.0',           '4.5.0-rc.1',      '4.5.0-rc.2',
  '4.5.0',           '4.6.0',           '4.7.0',           '4.8.0',
  '4.9.0',           '5.0.0-alpha.1',   '5.0.0-alpha.2',   '5.0.0-beta.1',
  '5.0.0-beta.2',    '5.0.0-rc.1',      '5.0.0',           '5.0.1',
  '5.0.2',           '5.1.0',           '5.1.1',           '5.1.2',
  '5.2.0',           '5.2.1',           '5.2.2',           '5.3.0-rc.1',
  '5.3.0',           '5.3.1-rc.1',      '5.3.1',           '5.3.2-rc.1',
  '5.3.2',           '5.3.3-rc.1',      '5.3.3',           '5.4.0-rc.1',
  '5.4.0',           '5.4.1-rc.1',      '5.4.1',           '5.4.2-rc.1',
  '5.4.2',           '5.4.3-rc.1',      '5.4.3',           '5.5.0-rc.1',
  '5.5.0-rc.2',      '5.5.0',           '5.5.1-rc.1',      '5.5.1',
  '5.6.0-rc.1',      '5.6.0',           '6.0.0-beta.1',    '6.0.0-rc.1',
  '6.0.0-rc.2',      '6.0.0'
]

2、根据 wiki文档 描述引入 echarts 需要：

import Cherry, { EChartsTablePlugin } from 'cherry-markdown';

但实测 cherry-markdown 好像并没有导出 EChartsTablePlugin，会报错 ，dist\types\addons\advance\cherry-table-echarts-plugin.d.ts 这里倒是导出了一个 EChartsTableEngine，但也不是文档中说的 EChartsTablePlugin

能否给个 echarts 导入的完整例子？

[foxfire881]

{
  "@types/echarts": "^4.9.22",
  "echarts": "^4.9.0",
}

import echarts from "echarts";
import EChartsTableEngine from "cherry-markdown/dist/addons/advance/cherry-table-echarts-plugin";
import Cherry from "cherry-markdown"
Cherry.usePlugin(EChartsTableEngine, { echarts });

一番折腾后，不报 echarts 的错误了，但是显示却不对，echarts图表还是没显示出来，期望应该是previewOnly模式满屏显示，但实际却是编辑模式显示了左右两边（左侧源码，右侧全空啥都没有），并且报告 BUILD_ENV 这个变量找不到，可是我从头到尾都没用过这个变量。

Uncaught (in promise) t: Error: ReferenceError: BUILD_ENV is not defined
    at t.value (http://localhost:5173/node_modules/.vite/deps/cherry-markdown.js?t=1773999507975&v=2869b5d5:52392:12)

看报错是来自于cherry-markdown.esm.js:1，错误堆栈底层来自于 config 配置报错，下面是我的全部配置（用于文章浏览模式，不是编辑模式），请帮忙看看哪里有错误？

btw: 这个配置是从之前旧版0.8.48版的配置 copy 过来的，没怎么调整过，之前 0.8.48 是正常的，升级到了0.10.3 各种问题

import callbacks from "./callback";


import echarts from "echarts";
import EChartsTableEngine from "cherry-markdown/dist/addons/advance/cherry-table-echarts-plugin";
import Cherry from "cherry-markdown"
Cherry.usePlugin(EChartsTableEngine, { echarts });

  const cherry_config = {
    id: 'content',
    value: '',
    externals: {
        //externals,
        echarts,
        // echarts: window.echarts,
        // katex: window.katex,
        // MathJax: window.MathJax,
    },
    // 解析引擎配置
    engine: {
        // 全局配置
        global: {
            // 是否启用经典换行逻辑
            // true：一个换行会被忽略，两个以上连续换行会分割成段落，
            // false： 一个换行会转成<br>，两个连续换行会分割成段落，三个以上连续换行会转成<br>并分割段落
            classicBr: false,
            /**
             * 额外允许渲染的html标签
             * 标签以英文竖线分隔，如：htmlWhiteList: 'iframe|script|style'
             * 默认为空，默认允许渲染的html见src/utils/sanitize.js whiteList 属性
             * 需要注意：
             *    - 启用iframe、script等标签后，会产生xss注入，请根据实际场景判断是否需要启用
             *    - 一般编辑权限可控的场景（如api文档系统）可以允许iframe、script等标签
             */
            htmlWhiteList: "",
            /**
             * 适配流式会话的场景，开启后将具备以下特性：
             * 1. 代码块自动闭合，相当于强制 `engine.syntax.codeBlock.selfClosing=true`
             * 2. 文章末尾的段横线标题语法（`\n-`）失效
             *
             * 后续如果有新的需求，可提issue反馈
             */
            flowSessionContext: true,
        },
        // 内置语法配置
        syntax: {
            // 语法开关
            // 'hookName': false,
            // 语法配置
            // 'hookName': {
            //
            // }
            image: {
                videoWrapper: (link, type, defaultWrapper) => {
                    return defaultWrapper;
                },
            },
            link: {
                /** 生成的<a>标签追加target属性的默认值 空：在<a>标签里不会追加target属性， _blank：在<a>标签里追加target="_blank"属性 */
                target: "_blank",
                /** 生成的<a>标签追加rel属性的默认值 空：在<a>标签里不会追加rel属性， nofollow：在<a>标签里追加rel="nofollow：在"属性*/
                rel: "",
            },
            autoLink: {
                /** 生成的<a>标签追加target属性的默认值 空：在<a>标签里不会追加target属性， _blank：在<a>标签里追加target="_blank"属性 */
                target: "_blank",
                /** 生成的<a>标签追加rel属性的默认值 空：在<a>标签里不会追加rel属性， nofollow：在<a>标签里追加rel="nofollow：在"属性*/
                rel: "",
                /** 是否开启短链接 */
                enableShortLink: true,
                /** 短链接长度 */
                shortLinkLength: 20,
            },
            list: {
                listNested: false, // 同级列表类型转换后变为子级
                indentSpace: 2, // 默认2个空格缩进
            },
            table: {
                enableChart: true,
                chartRenderEngine: EChartsTableEngine,
                externals: ['echarts'],
            },
            codeBlock: {
                wrap: true, // 超出长度是否换行，false则显示滚动条
                lineNumber: true, // 默认显示行号
                copyCode: true, // 是否显示“复制”按钮
                editCode: true, // 是否显示“编辑”按钮
                expandCode: true, // 是否展开代码块
                unExpandCode: true, // 是否展开代码块
                changeLang: false, // 是否显示“切换语言”按钮
                selfClosing: true, // 自动闭合，为true时，当md中有奇数个```时，会自动在md末尾追加一个```
                customRenderer: {
                    // 自定义语法渲染器
                },
                mermaid: {
                    svg2img: false, // 是否将mermaid生成的画图变成img格式
                },
                /**
                 * indentedCodeBlock是缩进代码块是否启用的开关
                 *
                 *    在6.X之前的版本中默认不支持该语法。
                 *    因为cherry的开发团队认为该语法太丑了（容易误触）
                 *    开发团队希望用```代码块语法来彻底取代该语法
                 *    但在后续的沟通中，开发团队发现在某些场景下该语法有更好的显示效果
                 *    因此开发团队在6.X版本中才引入了该语法
                 *    已经引用6.x以下版本的业务如果想做到用户无感知升级，可以去掉该语法：
                 *        indentedCodeBlock：false
                 */
                indentedCodeBlock: true,
                tab: {
                    "autoChange": true,
                    "spacesCount": 4
                }
            },
            emoji: {
                //参考https://docs.github.com/en/rest/emojis
                useUnicode: true, // 是否使用unicode进行渲染
                customResourceURL:
                    "https://github.githubassets.com/images/icons/emoji/unicode/${code}.png?v8",
                upperCase: false,
            },
            fontEmphasis: {
                /**
                 * 是否允许首尾空格
                 * 首尾、前后的定义： 语法前**语法首+内容+语法尾**语法后
                 * 例：
                 *    true:
                 *           __ hello __  ====>   <strong> hello </strong>
                 *           __hello__    ====>   <strong>hello</strong>
                 *    false:
                 *           __ hello __  ====>   <em>_ hello _</em>
                 *           __hello__    ====>   <strong>hello</strong>
                 */
                allowWhitespace: false,
            },
            strikethrough: {
                /**
                 * 是否必须有前后空格
                 * 首尾、前后的定义： 语法前**语法首+内容+语法尾**语法后
                 * 例：
                 *    true:
                 *            hello wor~~l~~d     ====>   hello wor~~l~~d
                 *            hello wor ~~l~~ d   ====>   hello wor <del>l</del> d
                 *    false:
                 *            hello wor~~l~~d     ====>   hello wor<del>l</del>d
                 *            hello wor ~~l~~ d     ====>   hello wor <del>l</del> d
                 */
                needWhitespace: false,
            },
            mathBlock: {
                engine: "MathJax", // katex或MathJax
                //src:"https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js",  // 如果使用MathJax将js在此处引入，katex则需要将js提前引入
                src: "/mathjax/tex-svg.js",
                plugins: true, // 默认加载插件
            },
            inlineMath: {
                engine: "MathJax", // katex或MathJax
                //src:"https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js",  // 如果使用MathJax将js在此处引入，katex则需要将js提前引入
                src: "/mathjax/tex-svg.js",
            },
            toc: {
                /** 默认只渲染一个目录 */
                allowMultiToc: false,
                /** 是否显示自增序号 */
                showAutoNumber: false,
            },
            header: {
                /**
                 * 标题的样式：
                 *  - default       默认样式，标题前面有锚点
                 *  - autonumber    标题前面有自增序号锚点
                 *  - none          标题没有锚点
                 */
                anchorStyle: "none",
            },
        },
    },
    editor: {
        defaultModel: 'previewOnly',
        height: '100%',
    },
    toolbars: {
        toolbar: false,
        // 配置目录
        toc: true,
        toc: {
            position: 'fixed',
            updateLocationHash: false, // 要不要更新URL的hash
            defaultModel: 'full', // pure: 精简模式/缩略模式，只有一排小点； full: 完整模式，会展示所有标题
            cssText: 'right:20px'
        },
    },
    callback: {
        onClickPreview: callbacks.onClickPreview
    },
    previewer: {
        // 自定义markdown预览区域class
        // className: 'markdown'
        enablePreviewerBubble: false,
    },
    nameSpace: 'cherry',
    themeSettings: {
        // 目前应用的主题
        mainTheme: '',
        codeBlockTheme: '',
    },
    keydown: [],
    //extensions: [],
}

export default cherry_config

[foxfire881]

经过多轮测试，定位到问题在下面这里，把 echarts 注释掉就一切正常（满屏显示previewOnly模式，但是对应的echarts做的图表也无法显示）；一旦把 echarts 加上，整个布局就乱了（编辑模式，半屏显示左边源码侧，右边预览侧是全空，echarts做的图表当然也没有），并且浏览器报告错误 BUILD_ENV 没有定义。

看来还是 echarts 引入的问题，还请详细补一下文档，现在文档应该有些问题。

    externals: {
        //externals,
        echarts, 
        // echarts: window.echarts,
        // katex: window.katex,
        // MathJax: window.MathJax,
    },

另外给 cherry-markdown 的 package.json 加个 echarts 的依赖关系吧，让用户自己安装真不知道装哪个，况且 mermaid 都已经内置在 dist 产物里了，再加一个 echarts 名正言顺，让用户自己安装很容易因为版本依赖等各种问题出现错误

[sunsonliu]

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
new Cherry({
  ...
  externals: {
    echarts: window.echarts
  }
  ...
})

可以这么试试哈

[foxfire881]

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
new Cherry({
  ...
  externals: {
    echarts: window.echarts
  }
  ...
})

可以这么试试哈

我的项目是Vue，不适合这种引用script的模式。应该不是使用方式问题，之前引用 0.8.48 版 cherry 和 4.9.15 echarts 都是正常的，业务代码基本没变过，就是把 cherry 升级到 0.10.3 后出现了各种问题。

这个是我最新的 package.json, 加了 echarts 5.4.0还是跑不起来，import echarts from "echarts" 报错echarts库没有导出echarts变量，然后又加了 @types/echarts 还是不行

{
  "name": "client",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite dev --force",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.3.2",
    "@types/echarts": "^4.9.22",
    "axios": "^1.13.6",
    "cherry-markdown": "^0.10.3",
    "echarts": "^5.4.0",
    "element-plus": "^2.13.5",
    "mathjax": "^4.1.1",
    "mermaid": "^11.13.0",
    "sass": "^1.98.0",
    "sass-loader": "^16.0.7",
    "viewerjs": "^1.11.7",
    "vue": "^3.5.30",
    "vue-router": "^5.0.3",
    "vuex": "^4.1.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^6.0.5",
    "@vue/compiler-sfc": "^3.5.30",
    "@vue/eslint-config-prettier": "^10.2.0",
    "babel-eslint": "^10.1.0",
    "eslint-plugin-prettier": "^5.5.5",
    "eslint-plugin-vue": "^10.8.0",
    "less": "^4.6.4",
    "prettier": "^3.8.1",
    "vite-plugin-dynamic-import": "^1.6.0"
  }
}

[foxfire881]

问了AI, echarts从5.0开始导入方式完全变了，cherry 文档中 import echarts form 'echarts' 只对旧版有效，新版已经不能再这样用了。

另外，调整成 import * as echarts from 'echarts' 后，还是报错：

Uncaught (in promise) t: Error: ReferenceError: BUILD_ENV is not defined
    at t.value (http://localhost:5173/node_modules/.vite/deps/cherry-markdown.js?v=bf6b2186:52392:12)
    at t.value (http://localhost:5173/node_modules/.vite/deps/cherry-markdown.js?v=bf6b2186:51926:582)
    at new t (http://localhost:5173/node_modules/.vite/deps/cherry-markdown.js?v=bf6b2186:51909:618)

请更新文档对 echarts 5.0 以上的导入给个完整例子吧~ 旧版 echarts 4.9.15 现在 nodejs 官网上已经废掉没有了，cherry继续依赖4.9.15 echarts 的话将导致 npm install echarts@4.9.15 无法安装