如何使用CDN在Vite中导入包？

Question

我正在使用 Vite、Vue 和 Element-Plus 开发一个 Web 项目。我找到了vite-plugin-cdn-import并尝试了一下，有的js可以成功从CDN下载，有的却不能。

使用这些包（package.json）：

{
  ...
  "dependencies": {
    "axios": "^1.4.0",
    "d3": "^4.5.0",
    "element-plus": "^2.3.7",
    "jquery": "^3.7.0",
    "save-svg-as-png": "^1.4.17",
    "vite-plugin-cdn-import": "^0.3.5",
    "vue": "^3.3.4",
    "xlsx": "^0.18.5"
  },
  ...
}

我如何使用（App.vue）：

import axios from 'axios'
import { ElMessage } from 'element-plus'
import { ref, reactive } from 'vue'
import { utils, writeFile } from 'xlsx'
import { select } from 'd3'
import * as svg from 'save-svg-as-png'

我如何使用vite-plugin-cdn-import：

import importToCDN from 'vite-plugin-cdn-import'
export default defineConfig({
  plugins: [
    importToCDN({
      modules: [
        {
          name: 'axios',
          var: 'axios',
          path: 'https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js'
        },
        {
          name: 'xlsx',
          var: 'xlsx',
          path: 'https://cdn.bootcdn.net/ajax/libs/xlsx/0.18.5/cpexcel.min.js'
        },
        {
          name: 'jquery',
          var: '$',
          path: 'https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js'
        },
        {
          name: 'd3',
          var: 'd3',
          path: 'https://cdn.bootcdn.net/ajax/libs/d3/4.5.0/d3.min.js'
        },
        {
          name: 'save-svg-as-png',
          var: 'saveSvgAsPng',
          path: 'https://cdn.bootcdn.net/ajax/libs/save-svg-as-png/1.4.17/saveSvgAsPng.min.js'
        },
        {
          name: 'vue',
          var: 'vue',
          path: 'https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js'
        },
        {
          name: 'element-plus',
          var: 'ElementPlus',
          path: 'https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.7/index.full.min.js'
        },
      ]
    })
  ]
})

只有axios、jquery、d3可以正常工作，其他都会报错。

我启动了一个新的 Vue 项目，尝试从 CDN 导入 vue，它报告

importToCDN is not a function

。

如何使用 CDN 导入每个包？这取决于包如何导出模块吗？其实我不太懂vite-plugin-cdn-import的模块怎么写，name和var应该填什么？

谢谢！

• vite-plugin-cdn-导入
• 如何使用CDN

Answer 1

在将库移至 CDN 之前，您需要确保它们以适合通过 CDN 使用的格式提供。 在 Unpkg 和 jsDelivr 上检查它们