如何运行npm"文件流"示例代码？

Question

我计划在浏览器中使用文件流API。通过搜索，我找到了这个文件流模块。

https://github.com/damonoehlman/filestream

作者编写了示例用法代码。这里是。（文件名：drag-n-drop.js）

var crel = require('crel');
var detect = require('feature/detect');
var dnd = require('drag-and-drop-files');
var img = crel('img');
var video = crel('video', { autoplay: true });
var FileReadStream = require('filestream/read');
var FileWriteStream = require('filestream/write');
function upload(files) {
  var queue = [].concat(files);
  function sendNext() {
    var writer = new FileWriteStream();
    var next = queue.shift();
    console.log('sending file');
    new FileReadStream(next).pipe(writer).on('file', function(file) {
      console.log('file created: ', file);
      img.src = detect('URL').createObjectURL(file);
      // video.src = detect('URL').createObjectURL(next);
      if (queue.length > 0) {
        sendNext();
      }
    });
  }
  sendNext();
}
dnd(document.body, upload);
document.body.appendChild(crel('style', 'body, html { margin: 0; width: 100%; height: 100% }'));
document.body.appendChild(img);
document.body.appendChild(video);

1。

在此代码中...我完全沮丧。该代码适用于哪一侧？服务器端？还是客户端代码？

如果服务器端代码，create-server方法在哪里以及如何读取文档？〜代码？

如果客户端侧代码，如何在浏览器中使用"需要"方法？

最重要的是，此运行代码是吗？

2。

撇开以前的问题，我试图运行此代码。为此，我安装了" Crel"，"功能"，"拖放文件"模块，并给出命令：$node drag-n-drop.js

但是，它行不通，错误消息是这样的。这也使我感到沮丧...

[appPath]/node_modules/crel/crel.js:91
        element = crel[isElementString](element) ? element : d.createElement(e
                                                               ^
TypeError: undefined is not a function
    at crel ([appPath]/node_modules/crel/crel.js:91:64)
    at Object.<anonymous> ([appPath]/node_modules/filestream/examples/drag-n-drop.js:4:11)

帮助！

更新。3。

嘿。我可以再问一个问题吗？我将文件流模块调整为我的代码，并用上述示例代码引用。在这样做的过程中，我陷入了detect('URL')代码。我在NPM页面中读取"功能"模块，并仔细阅读说明，但我仍然不明白。请参阅此页面链接，我不知道为什么作者使用detect('URL')，而不是window.URL。你能解释一下吗？我真的很感谢您。

Answer 1

问题1：

document.body通常是window对象的属性，因此示例是针对客户端的。或者，您可以使用一些模块，例如：jsdom。然后，您可以使用节点中的窗口。

require是COMPORJS模块规格中的一个函数。您可以使用浏览器或WebPack将其编译为客户端。

问题2：

如上所述，您应该使用commonjs模块构建工具或将JSDON用于服务器端。

createElement是window.document上的一种方法。

更新：

问题3：

require('feature/detect');

将需要在feature NPM模块中dentect.js

如您所见，它测试ms，o，moz，webkit在窗口上具有目标功能的前缀。

在链接下面的底部，有一个Browser compatibility表。

https://developer.mozilla.org/en-us/docs/web/api/window/url/url

在Chrome 8.0，Opera 15.0和Safari 6.0 URL中以webkitURL。

存在

这就是作者这样做的原因。