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

Question

在处理一个项目时，我遇到了需要使用脚本标签加载作为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 "外部"属性，但似乎也无法让它按预期工作。后者似乎是要走的路，但我最终得到的"src/module/MyObject"是未定义的错误。

任何帮助表示赞赏。

编辑： 根据要求，我的 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/],
},
],
},
}

Answer 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