说明

echarts-with-plugin-umd 是 Echarts 插件 UMD 外置式引入的版本（非官方）。

改动或新增目录结构

对比 npm 上的 echarts 包，改动如下

.
├── build
|    └──build-with-plugin-outside.js #新增用以打包插件的编译文件
└── package.json   #新增 build:with-plugin-outside 打包命令

生成流程

安装依赖

pnpm install

编译

pnpm run build:with-plugin-outside

使用

在所需要引入的项目的 vite.config.js 文件 plugins 节点添加如下配置，其中
importToCDN module 中的 path 可以改为你自己的静态资源服务器,
另在build节点中增加以下配置...

import { Plugin as importToCDN } from "vite-plugin-cdn-import";
import externalGlobals from "rollup-plugin-external-globals";
 ...

 build:{
     rollupOptions: {
      external: ["echarts/charts" , "echarts/components","echarts/core", "echarts/features","echarts/renderers", ],
      plugins: [
        externalGlobals({
          "echarts/charts": "echarts_charts",  
          "echarts/components": "echarts_components",
          "echarts/core": "echarts",
          "echarts/features": "echarts_features",
          "echarts/renderers": "echarts_renderers",
        }),
      ],
    },
 },
 plugins: [
     //... other plugins
    importToCDN({
      modules: [
            {
          name: "echarts",
          var: "echarts",
          path: [
             `https://cdn.jsdelivr.net/npm/@elonmuscle/[email protected]/dist/echarts.min.js`,
             `https://cdn.jsdelivr.net/npm/@elonmuscle/[email protected]/dist/charts.min.js`,
             `https://cdn.jsdelivr.net/npm/@elonmuscle/[email protected]/dist/components.min.js`, 
             `https://cdn.jsdelivr.net/npm/@elonmuscle/[email protected]/dist/features.min.js`, 
             `https://cdn.jsdelivr.net/npm/@elonmuscle/[email protected]/dist/renderers.min.js`, 
             ],
        },
      ],
    }),
  ],