使用 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:16:59 【问题描述】:

我正在使用 @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 替换)?的主要内容,如果未能解决你的问题,请参考以下文章

vue3学习

【webpack】--config 的使用

webpack入门——webpack的使用

Webpack的使用

# Webpack 学习Webpack 搭建 Vue项目

# Webpack 学习Webpack 搭建 Vue项目