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

Question

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

我通过npm - npm install video.js --save-dev安装了npm install video.js --save-dev。

在webpack中，我读到video.js应该通过脚本加载器加载，否则它会抛出错误。

这就是我是如何通过babel加载器加载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);

我知道这个错误：

呈现器-0.js: TypeError：(0，_video2.default)不是函数(…)

任何帮助都将不胜感激。我是ES6 / React / Webpack的新手

Answer 1

--在复制和粘贴一些随机代码之前，请查看加载程序的自述文件。此处不批准脚本加载器，因为它在跳过整个模块系统时将脚本导入全局范围。

因此，如果您想使用脚本加载程序，只需编写：

import "script-loader!video.js";

console.log(videojs); // should be an object now

通常，我不建议使用脚本加载器，因为它忽略了模块系统的全部要点，即您显式地将内容导入本地范围。在上面的示例中，导入作为对全局范围的副作用发生，这实际上与使用<script>标记以及名称冲突等所有缺点相同。

通常有更好的替代方案，比如出口-装载机，它在模块的末尾附加一个module.exports，从而将一个古老的全局脚本转换为一个CommonJS模块。

但是，在这种情况下，您根本不需要加载程序，因为video.js已经知道CommonJS模块系统了。写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

这是因为webpack发现这个文件已经被捆绑在一起了。通常情况下，最好包含实际的src及其所有的小模块，而不是一个大的dist，因为这样webpack能够更好地优化包。我写了一个关于如何导入webpack遗留脚本的详尽说明。

不幸的是，video.js在npm部署的版本中没有包括它的src，所以您不得不使用dist。为了消除错误消息并提高webpack的构建时间，可以通过在您的video.js中设置module.noParse选项来指示webpack在解析require()语句的代码时跳过webpack.config.js

    module: {
        noParse: [
            /node_modules[\\/]video\.js/
        ]
    }

通常，将所有预绑定模块(通常是带有dist文件夹的模块)标记为noParse是安全的，因为它们已经是独立包含的。

Answer 2

包括SDN

<script src="//vjs.zencdn.net/5.11/video.min.js"></script>

webpack配置：

config.externals = {
    'video.js': 'videojs'
};