webpack构建时如何排除element-plus包（用import CDN代替）（@vue/cli@next）？

Question

我正在使用@vue/cli 5.0.0-beta.3、vue 3.2.8 和 element-plus 1.1.0-beta.8。

为了减小构建包的大小，我在 index.html 中使用 import CDN 构建包时尝试排除所有第三方依赖项（vue、vue-router、vuex、element-plus 等）文件：

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- cdn import -->
    <!-- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.8/dist/vue.global.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router@4.0.11/dist/vue-router.global.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuex@4.0.2/dist/vuex.global.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-class-component@8.0.0-rc.1/dist/vue-class-component.global.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus@1.1.0-beta.8/dist/index.css">
    <script src="https://cdn.jsdelivr.net/npm/element-plus@1.1.0-beta.8/lib/index.js"></script>
    <!-- cdn import -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>Financial Tools</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

虽然我未能使用 vue.config.js 文件排除 element-plus：

module.exports = {
  config.externals = {
    vue: "Vue",
    "vue-router": "VueRouter",
    vuex: "Vuex",
    "element-plus": "ElementPlus",
  }
}

vue/cli服务启动，页面控制台报错：

Uncaught ReferenceError: ElementPlus is not defined

下面是重现此问题的示例项目： https://github.com/linrongbin16/financial_tools_app3

还有一个错误：

Uncaught ReferenceError: exports is not defined

同样来自元素加CDN：

"use strict";Object.defineProperty(exports,"__esModule" ...

再想想，也许我的 tsconfig.json 文件有问题：

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

但是由于我是 vue3+typescript+element-plus 的新手，我不知道为什么会这样，也不知道如何配置它。

Answer 1

如果您检查 CDN links，除了 element-plus 之外的所有部门都从 dist 文件夹加载。这些是库的编译版本。

Element-plus 使用linkhttps://cdn.jsdelivr.net/npm/element-plus@1.1.0-beta.8/lib/index.js。如果您打开该文件，您会看到类似 require 的内容 - 这显然不是用于浏览器的文件。需要Webpack 1st处理...

current docs recommend loading from cdn.jsdelivr.net/npm/element-plus when using jsDelivr but that URL load as lib file for some strange reason even they have set a default file for jsDelivr in package.json为"dist/index.full.js"

所以暂时不要使用短路径，而是使用 link：https://cdn.jsdelivr.net/npm/element-plus@1.1.0-beta.8/dist/index.full.js

Answer 2

我在构建“vuejs-admin-dashboard-template”后在生产模式下遇到此错误 (ReferenceError: exports is not defined)。

在 vite.config.js 中禁用此设置为我解决了这个问题。

build: {
    commonjsOptions: {
      transformMixedEsModules: false,
    }
  }

webpack构建时如何排除element-plus包（用import CDN代替）（@vue/cli@next）？

How to exclude element-plus package (replaced by import CDN) when building with webpack (@vue/cli@next)?

typescript

vue.js

vue-cli

vuejs3

element-plus