Reactjs Video.js-为什么同时需要npm模块和<；脚本>；标签？

根据官方的Video.js文档（），您可以将js和css的脚本标记添加到页面中。然后，通过npm或bower安装包管理器

你为什么需要这两个

我会认为这是其中之一。所以我试着只使用npm包。我的React类看起来像：

import React, { Component } from 'react';
import videojs from 'video.js';

export default class MyVideoContainer extends Component {

  constructor(props) {
    super(props);
    this.state = { };
  }

  render() {
    return <div>
        <video id="test_video_1" className="video-js vjs-default-skin" controls preload="auto" width="640" >
          <source src="MY_VIDEO.mp4" type="video/mp4" />
          <p className="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
        </video>
      </div>;
  }

  componentDidMount() {
    videojs("test_video_1", {}, function(){

    });
  }

}

import React，{Component}来自'React'；
从“video.js”导入videojs；
导出默认类MyVideoContainer扩展组件{
建造师（道具）{
超级（道具）；
this.state={}；
}
render（）{
返回
< P CordNe=“VJS No.JS”>查看此视频请启用JavaScript，并考虑升级到
的Web浏览器
;
}
componentDidMount（）{
videojs（“测试视频1”，{}，函数（）{
});
}
}

javascript看起来加载正确，但是没有CSS应用到视频中，所以看起来像是垃圾。在视频下方有一堆表单按钮，用于播放和暂停，以及各种疯狂的统计数据

但是如果我只使用没有videojs导入的标记，效果会更好

---

我更喜欢使用npm模块，但不能让CSS正常工作。我做错了什么？

因为

Video.js

文档说您需要npm和css在系统上正确运行

Video.js

。npm包只包含在react中运行

video.js

所需的javascript，但不包含css。因此，在

React组件中导入css时，需要指定一个包含css的单独文件。在
index.html
中提到这一点，您将看到样式正确加载

<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">

如果您使用的是webpack，您还可以从


new webpack.ProvidePlugin({
videojs：“video.js”，
“window.videojs”：“video.js”
}),
很有趣，这很有效。但是如果我查看node_modules/video.js/src/css/中有大量css文件。为什么这些不起作用？他们不应该被网页包捆绑吗？或者我对工作流的理解不正确？您需要在webpack中设置样式加载器来导入css，而不是像上面的示例那样设置链接href。一旦你有了处理/加载css的webpack环境设置，你可以简单地放上：@require../node_modules/video.js/dist/video js.css”；在css file.IMO中，如果要修改Video.js源代码，则只需要NPM模块。否则，您也可以从CDN加载它，或自托管从CDN或GitHub存储库上的/dist目录下载的副本。