Question

我正在尝试通过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的新手

Answer 1

在复制并粘贴一些随机代码之前，请先查看加载程序的自述文件。 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是安全的，因为它们已经是自包含的。

Answer 2

包括SDN

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

webpack config：

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

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

2 个答案: