希望你一切都好。我目前正在开发一个 JavaScript 模块,计划使用 URL https://x.com/my-script.js 通过内容交付网络 (CDN) 加载该模块。然而,尽管尝试了各种 webpack 配置,我还是遇到了障碍。
环境:
澄清一下,当我在没有 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(),
],
};
请注意,对于我对捆绑模块所做的每一次更改,我都会清除浏览器缓存
任何帮助将不胜感激。
提前致谢!
通过在index.html文件中添加script标签解决
<script type="text/javascript" src="https://x.com/my-script.js" defer></script>
然后在组件内部使用时,您可以按如下方式调用该函数
window.randomGenerator.generateRandomNumber
但请注意,脚本将在每个页面加载中加载,一旦我发现如何仅在一个 vuejs 组件内的特定页面中加载,我将发布另一个答案