javascript - 如何运行 npm 'filestream' 示例代码？

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.

在这段代码中……我完全感到沮丧。此代码适用于哪一方？服务器端？还是客户端代码？

如果是服务器端代码，创建服务器方法在哪里以及如何读取 document.body.~ 代码？

如果是客户端代码，如何在浏览器中使用'require'方法？

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

2.

抛开前面的问题，我尝试运行这段代码。为此，我安装了“crel”、“feature”、“drag-and-drop-files”模块，并给出命令:$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 页面中的 'feature' 模块并仔细阅读了描述，但我仍然无法理解。引用这个页面链接，我不知道为什么作者使用detect('URL')，而不是window.URL。你能解释一下吗？我真的很感激你。

Answer 1

问题一:

document.body 通常是一个window 对象的属性，所以这个例子是针对客户端的。或者你可以使用一些模块，例如:jsdom .然后就可以在node中使用window了。

require 是 CommonJS 中的一个函数模块规范。你可以使用 browserify或 webpack为客户端编译它。

问题二:

如上所述，您应该使用 CommonJS 模块构建工具或在服务器端使用 jsdom。

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

更新:

问题三:

require('feature/detect');

需要 detect.js在 feature npm 模块中

如你所见，它测试了ms、o、moz、webkit前缀，目标特征是窗口。

在下面链接的底部，有一个浏览器兼容性表。

https://developer.mozilla.org/en-US/docs/Web/API/Window/URL

在 Chrome 8.0、Opera 15.0 和 Safari 6.0 中，URL 以 webkitURL 的形式存在。

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