Webpack 通过 CDN 导入到 vue js 请求的模块“url”不提供名为“default”的导出

Question

希望你一切都好。我目前正在开发一个 JavaScript 模块，计划使用 URL https://x.com/my-script.js 通过内容交付网络 (CDN) 加载该模块。然而，尽管尝试了各种 webpack 配置，我还是遇到了障碍。

环境：

• VueJS 3.3.4
• Webpack 5.88.1
• Webpack-cli 5.1.4

澄清一下，当我在没有 webpack 的情况下简化模块时，如下所示：

const randomGenerator = {
    generateRandomNumber: function(min, max) {
       return Math.floor(Math.random() \* (max - min + 1)) + min;
    }
};

export default randomGenerator;

...进口就像一个魅力。以下是我导入和使用该模块的方法：

import  randomGenerator from 'https://x.com/my-script.js'; 

console.log(randomGenerator.generateRandomNumber(1, 100));

以下回复堆栈问题告诉您如何导出default和导入named-default-javascript

但是当我将 webpack 放入其中时，我收到此错误：

requested module 'https://x.com/my-script.js' does not provide an export named 'default'

我怀疑这是一个 webpack 配置问题，所以我查阅了 Webpack 文档，它建议像这样配置输出通用模块定义，它能够在任何地方工作，无论是在客户端、服务器还是其他地方，如在 github 中注明：

 output: {  
   filename: 'compactedModule.js',
   path: path.resolve(__dirname, 'dist'),  
   library:'randomGenerator',
   libraryTarget: 'umd'  
 }

我还检查了Axios axios.min.js是如何构建的，它是类似的

最后这是我完整的 webpack 配置文件：

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');


module.exports = {
  mode: 'development',
  entry: '../src/test.js',
  output: {  
       filename: 'compactedModule.js',
       path: path.resolve(__dirname, 'dist'),  
       library:'randomGenerator',
       libraryTarget: 'umd'  
  },
  plugins: [
    new CleanWebpackPlugin(),
  ],
};

请注意，对于我对捆绑模块所做的每一次更改，我都会清除浏览器缓存

任何帮助将不胜感激。

提前致谢！

Answer 1

通过在index.html文件中添加script标签解决

  <script type="text/javascript" src="https://x.com/my-script.js" defer></script>

然后在组件内部使用时，您可以按如下方式调用该函数

window.randomGenerator.generateRandomNumber

但请注意，脚本将在每个页面加载中加载，一旦我发现如何仅在一个 vuejs 组件内的特定页面中加载，我将发布另一个答案