如何使用 Webpack (vue-cli) 从生产构建中排除 CommonJS 库答案

【问题标题】：How to exclude CommonJS libs from production build with Webpack (vue-cli)如何使用 Webpack (vue-cli) 从生产构建中排除 CommonJS 库
【发布时间】：2021-01-06 02:26:14
【问题描述】：

我已经通过使用 Webpack 配置 externals 为 vue 做到了这一点

首先我将 Vue 的 CDN 包含在我的 html 文件中

index.html

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

然后我修改了我的 webpack 配置

vue.config.js

module.exports = {
  configureWebpack: {
    // ...
    externals: {
      vue: 'Vue',
    }
    // ...
  },
}

一切都很完美。

但是当我尝试使用 vue-class-component 和 vue-property-decorator 时，它并没有按预期工作

index.html

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-class-component@7.2.5"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-property-decorator@9.0.0"></script>

vue.config.js

module.exports = {
  configureWebpack: {
    // ...
    externals: {
      vue: 'Vue',
      'vue-class-component': 'VueClassComponent',
      'vue-property-decorator': 'VuePropertyDecorator',
    }
    // ...
  },
}

我注意到这些文件的名称不同，以.common.js和.umd.js结尾

vue-class-component.common.js
vue-property-decorator.umd.js

然后我尝试了

vue.config.js

module.exports = {
  configureWebpack: {
    // ...
    externals: {
      vue: 'Vue',
      'vue-class-component': 'commonjs2 vue-class-component',
      'vue-property-decorator': 'umd vue-property-decorator',
    }
    // ...
  },
}

但效果不好

以下是我如何在我的src/ 中导入这些内容。脚本是用打字稿写的

import Vue from 'vue'

// ...

import { Component } from 'vue-property-decorator'

有人知道如何在 webpack 中使用 .common.js 和 .umd.js 处理 externals 吗？非常感谢！

【问题讨论】：

“它没有按预期工作” ....这到底是什么意思？
@MichalLevý 很抱歉不够清楚，这意味着我的应用程序崩溃了

标签： javascript typescript vue.js webpack vue-cli

【解决方案1】：

我认为问题不一定出在 Webpack 配置中...

如果我尝试加载 https://cdn.jsdelivr.net/npm/vue-class-component@7.2.5 它会给我 Original file: /npm/vue-class-component@7.2.5/dist/vue-class-component.common.js 这是 CommonJS 构建 - 浏览器将无法处理。尝试使用指向“浏览器兼容”构建的链接，例如 https://cdn.jsdelivr.net/npm/vue-class-component@7.2.6/dist/vue-class-component.min.js

vue-property-decorator 应该没问题，因为 UMD module 应该可以在浏览器中工作...

顺便说一句，这一切的意义何在？为什么不让 Webpack 做它的事呢？下载一个大的 JS 文件然后下载多个较小的文件总是更好...

【讨论】：