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

hgb123 发表于 Dev

hgb123

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

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

index.html

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></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/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></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'

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

米哈尔·莱维（MichalLevý）

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

如果我尝试加载https://cdn.jsdelivr.net/npm/[email protected]它，这将为我提供Original file: /npm/[email protected]/dist/vue-class-component.common.jsCommonJS构建-浏览器将无法处理该问题。尝试使用指向“浏览器兼容”版本的链接https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-class-component.min.js

vue-property-decorator应该很好，因为UMD模块应该在浏览器中可以工作...

顺便说一句，这一切的意义何在？为什么不让Webpack发挥作用？总是最好下载一个大JS文件，然后再下载多个小文件。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。