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

Question

vue我已经设法通过使用 Webpack 配置来做到这一点externals

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

索引.html

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

然后我修改了我的 webpack 配置

查看.config.js

module.exports = {

  configureWebpack: {

    // ...

    externals: {

      vue: 'Vue',

    }

    // ...

  },

}

一切都很顺利。

但是当我尝试使用vue-class-componentand时vue-property-decorator，它并没有像预期的那样工作

索引.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>

查看.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

然后我试了

查看.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'

任何人都知道如何externals在 webpack 中处理.common.js和.umd.js？非常感谢！

Answer 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.jsvue-property-decorator应该没问题，因为UMD 模块应该在浏览器中工作......顺便说一句，这一切有什么意义？为什么不让 Webpack 做它的事情呢？最好先下载一个大的 JS 文件，然后再下载多个小的……