如何使用 webpack 从外部文件加载 AMD 模块

Posted

技术标签:

【中文标题】如何使用 webpack 从外部文件加载 AMD 模块【英文标题】:How to load AMD modules from external file using webpack 【发布时间】:2020-05-19 14:38:15 【问题描述】:

在处理一个项目时,我遇到了需要使用脚本标签加载作为 AMD 模块编写的第三方文件的情况:<script type="text/javascript" src="https://cdn.host.com/external.js"></script>

该文件包含示例代码使用的多个模块,例如:

require(['src/module/MyObject'], (myObject) => 
 // Use myObject
);

该示例包含 RequireJS 作为脚本标记以启用此语法。 现在...我的项目是一个带有 Webpack 的 React 应用程序,我想在其中访问组件中某处的“myObject”,但我似乎无法让它工作。

仅使用 require() 语法会失败,因为 Webpack 会尝试将代码添加到包中。我尝试了 'non_webpack_require' 替代方案,保留 RequireJS 脚本标记,但这似乎在代码的其他地方添加了各种冲突(到处都是未定义的东西)。我还尝试摆弄 webpack 'External' 属性,但似乎也无法使其按预期工作。后者似乎是要走的路,但我最终得到 'src/module/MyObject' is undefined 错误。

任何帮助表示赞赏。

编辑: 根据要求,我的 webpack.config 的相关部分:


  entry: './src/index.tsx',

  output: 
    path: path.join(__dirname, 'dist'),
    publicPath: '/',
    filename: `js/[name].[contenthash].bundle.js`,
    chunkFilename: 'js/[name].[contenthash].js',
  ,

  resolve: 
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: ['.ts', '.tsx', '.js', '.json'],
    plugins: [
      new TsconfigPathsPlugin(),
    ],
  ,

  module: 
    rules: [
      
        test: /\.tsx?$/,
        use: 
          loader: "babel-loader",
        ,
        exclude: [/node_modules/],
      ,
    ],
  ,

【问题讨论】:

如果将库包含在 html 中,则与 Webpack 无关。如果myObject 是全局变量,请在加载应用后检查浏览器的开发控制台。 是的,所以我可以下载文件并将其包含在我的包中。但仍然不知道如何做到这一点。此外,似乎没有全局对象。而且......我不想在脚本标签中包含 RequireJS 库,因为它会破坏其他东西 如果使用 Webpack 在本地包含它,则不需要 RequireJS,因为 Webpack 应该支持它。你在用什么图书馆?我可以看看 这是文件:cdn.bitmovin.com/player/cast/8.1.0/… 你也可以发布你的Webpack配置的相关部分吗? 【参考方案1】:

我认为您使用了错误的示例。

RequireJS 是一个不同的旧模块解析器。通常,您不应该在同一个项目中同时拥有webpackRequirejs。有一些边缘情况,但这不是其中之一。

我在你提供的那个库中看了一点,他们确实有 es6 模块包,你应该看看下面的例子:

https://github.com/bitmovin/bitmovin-player-web-samples/tree/master/webpack-demo

这将是最好的方法。

如果您仍然出于某种原因想要使用他们的 CDN,那么最适合您的是:

https://cdn.bitmovin.com/player/web/8/bitmovinplayer.js

在这里查看完整的演示回购(他们也有反应)

https://github.com/bitmovin/bitmovin-player-web-samples

【讨论】:

嗨@jony89。感谢您的深入了解!非常感激。问题是我想使用他们的 Chromecast 库(不仅是播放器),该库目前仅以我提供的格式提供。我知道 RequireJS 和 Webpack 之间的区别,但不幸的是它现在就是这样。

以上是关于如何使用 webpack 从外部文件加载 AMD 模块的主要内容,如果未能解决你的问题,请参考以下文章

Worklight 6.1 和外部 dojolib,使用 AMD 加载自定义模块

使用 Webpack 加载 Mustache 模板

如何使用 webpack 从项目根目录导入外部文件?

使用 webpack 从 html 文件加载淘汰赛模板

如何使用 webpack 从 React JS 中的外部 JS 文件导入对象

Webpack 从入门到上树