Webpack导入video.js返回一个空对象

时间:2016-07-13 15:11:12

标签: javascript webpack video.js

我正在尝试通过webpack使用video.js。

我通过npm - npm install video.js --save-dev

安装了video.js.

在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的新手

2 个答案:

答案 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'
};