使用 webpack (@vue/cli@next) 构建时如何排除 element-plus 包（由 import CDN 替换）？
Posted
技术标签:
【中文标题】使用 webpack (@vue/cli@next) 构建时如何排除 element-plus 包（由 import CDN 替换）？【英文标题】：How to exclude element-plus package (replaced by import CDN) when building with webpack (@vue/cli@next)? 【发布时间】：2021-11-01 11:33:18 【问题描述】：我正在使用 @vue/cli 5.0.0-beta.3、vue 3.2.8 和 element-plus 1.1.0-beta.8。
为了缩小构建包的大小，在index.html文件中使用导入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 文件排除元素加：
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
同样来自element-plus 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 的新手，我不知道为什么会发生这种情况以及如何配置。
【问题讨论】：
【参考方案1】：如果您检查 CDN 链接，除了 element-plus 之外的所有部门都从 dist 文件夹加载。这些是库的编译版本。
Element-plus 使用链接https://cdn.jsdelivr.net/npm/element-plus@1.1.0-beta.8/lib/index.js。如果你打开文件，你可以看到类似require 的东西——这显然不是浏览器的文件。需要Webpack 1st 处理...
current docs 建议在使用 jsDelivr 时从 cdn.jsdelivr.net/npm/element-plus 加载，但由于某些奇怪的原因，该 URL 加载为 lib 文件，即使他们在 package.json 中将 jsDelivr 的默认文件设置为 "dist/index.full.js"
所以暂时不要使用短路径，而是使用此链接：https://cdn.jsdelivr.net/npm/element-plus@1.1.0-beta.8/dist/index.full.js
【讨论】：
以上是关于使用 webpack (@vue/cli@next) 构建时如何排除 element-plus 包（由 import CDN 替换）？的主要内容，如果未能解决你的问题，请参考以下文章