javascript - 如何使用 webpack 从外部文件加载 AMD 模块
问题描述
在一个项目中,我遇到了需要使用脚本标签加载作为 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/],
},
],
},
}
解决方案
我认为您使用了错误的示例。
RequireJS
是一个不同的旧模块解析器。通常,您不应该webpack
在Requirejs
同一个项目中拥有。有一些边缘情况,但这不是其中之一。
我在你提供的那个库中看了一点,他们确实有 es6 模块包,你应该看看下面的例子:
https://github.com/bitmovin/bitmovin-player-web-samples/tree/master/webpack-demo
这将是最好的方法。
如果您仍然出于某种原因想要使用他们的 CDN,那么最适合您的是:
https://cdn.bitmovin.com/player/web/8/bitmovinplayer.js
在这里查看完整的演示回购(他们也有反应)
推荐阅读
- java - 如何从 Couchbase 存储桶中获取最后插入的 Counter_id?
- php - 无法反转多维数组
- c# - 图表上的带状线错误
- php - 使用 cron 作业运行的文件发生错误时如何通知?
- python - 'dict' 对象不支持索引 python 烧瓶
- c# - DB Transaction:我们可以只阻止一条记录,而不是整个表吗?
- python - 查找 2d 和 3d 坐标之间的转换
- linux - 如何在 Google Compute Engine 上本地执行程序
- python - 多处理酸洗错误:_pickle.PicklingError: Can't pickle
:它与 __main__.myProcess 不是同一个对象 - api - 是否存在测试 strava 帐户?