我正在尝试通过webpack使用video.js。
我通过npm - npm install video.js --save-dev
在webpack中我读到了video.js应该通过脚本加载器加载,否则会抛出错误。
这就是我通过babel loader
加载video.js的方法module:
loaders: [
{
test: /video\.js/,
loader: 'script'
}
]
我从这里得到了这个解决方案https://github.com/videojs/video.js/issues/2750
这是我的导入声明
import videojs from 'video.js';
我现在面临的问题是导入返回一个空对象,所以当我尝试这样做时:
var vidTag = ReactDOM.findDOMNode(this.refs.html5Video);
this.videojs = videojs(vidTag);
我收到此错误:
renderer-0.js:8031未捕获(在承诺中)TypeError:(0,_video2.default)不是函数(...)
任何帮助将不胜感激。我是ES6 / React / Webpack的新手
答案 0 :(得分:3)
在复制并粘贴一些随机代码之前,请先查看加载程序的自述文件。 script-loader在这里不合适,因为它在跳过整个模块系统的同时将脚本导入全局范围。
因此,如果您想使用脚本加载器,您只需编写:
$url = array_column($abstract_details, 'url');
echo implode('<br/>', $url);
通常我不建议使用脚本加载器,因为它忽略了模块系统的全部内容,您可以将明确地导入到本地范围中。在上面的示例中,导入作为副作用发生在全局范围中,这实际上与仅使用import "script-loader!video.js";
console.log(videojs); // should be an object now
标记及其所有缺点(如名称冲突等)相同。 / p>
通常有更好的替代方法,例如exports-loader,它会在模块末尾添加<script>
,从而将旧式全局脚本转换为CommonJS模块。
然而,在这种特殊情况下,您根本不需要加载器,因为video.js已经知道CommonJS模块系统。只需写下module.exports
。
然而,还有另一个小问题。如果使用webpack编译它,它将向控制台输出警告:
import videojs from "video.js";
这是因为webpack检测到此文件已经以某种方式捆绑。通常情况下,将实际的WARNING in ../~/video.js/dist/video.js
Critical dependencies:
13:480-487 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
@ ../~/video.js/dist/video.js 13:480-487
包含在其所有小模块而不是一个大src
中会更好,因为这样webpack就能够以更好的方式优化捆绑包。我已写下exhaustive explanation about how to import legacy scripts with webpack。
很遗憾,video.js在npm部署的版本中不包含dist
,因此您被迫使用src
。为了摆脱错误消息并改善webpack的构建时间,您可以通过设置module.noParse
选项来指示webpack在解析dist
语句的代码时跳过video.js你的require()
:
webpack.config.js
通常,将所有预先捆绑的模块(通常是 module: {
noParse: [
/node_modules[\\/]video\.js/
]
}
文件夹中的模块)标记为dist
是安全的,因为它们已经是自包含的。
答案 1 :(得分:0)
包括SDN
<script src="//vjs.zencdn.net/5.11/video.min.js"></script>
webpack config:
config.externals = {
'video.js': 'videojs'
};