Как исключить пакет element-plus (замененный CDN импорта) при сборке с помощью webpack (@vue/ cli@next)?

Я использую @vue / cli 5.0.0-beta.3, vue 3.2.8 с element-plus 1.1.0-beta.8.

Для уменьшения размера пакета сборки я стараюсь исключить все сторонние зависимости (vue, vue-router, vuex, element-plus и т. Д.) При сборке пакета с импортом CDN в index.html файл:

      <!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>

Пока мне не удалось исключить element-plus с помощью vue.config.js файл:

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

vue / cli service start, консоль страницы сообщает об ошибке:

      Uncaught ReferenceError: ElementPlus is not defined

Вот пример проекта для воспроизведения этой проблемы:https://github.com/linrongbin16/financial_tools_app3

И еще одна ошибка:

      Uncaught ReferenceError: exports is not defined

Также происходит из CDN element-plus:

      "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, я понятия не имею, почему это происходит и как это настроить.

Источник

2 ответа

Решение

Если вы проверяете ссылки CDN, все зависимости, кроме элемента плюс, загружаются из distпапки. Это скомпилированные версии библиотек.

Элемент-плюс использует ссылку https://cdn.jsdelivr.net/npm/element-plus@1.1.0-beta.8/lib/index.js. Если вы откроете файл, вы увидите такие вещи, как require- это явно не файл для браузера. Его нужно обработать Webpack 1st ...

В текущих документах рекомендуется загружать из cdn.jsdelivr.net/npm/element-plus при использовании jsDelivr, но этот URL-адрес загружается как libпо какой-то странной причине, даже если они установили файл по умолчанию для jsDelivr в package.json как "dist/index.full.js"

Поэтому пока не используйте короткий путь, а используйте эту ссылку: https://cdn.jsdelivr.net/npm/element-plus@1.1.0-beta.8/dist/index.full.js

Источник

у меня такая ошибка( ReferenceError: exports is not defined) в производственном режиме после формирования «vuejs-admin-dashboard-template».

Отключение этой настройки в vite.config.jsрешил это для меня.

      build: {
    commonjsOptions: {
      transformMixedEsModules: false,
    }
  }
Источник
Другие вопросы по тегам