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

问题描述 投票:0回答:1

希望你一切都好。我目前正在开发一个 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(),
  ],
};

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

任何帮助将不胜感激。

提前致谢!

javascript webpack import importerror client-side
1个回答
0
投票

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

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

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

window.randomGenerator.generateRandomNumber

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

© www.soinside.com 2019 - 2024. All rights reserved.