如何运行npm“filestream”示例代码?

I'm planning to use file stream api in the browser. By searching, I found this filestream module.

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

https://github.com/DamonOehlman/filestream

The author wrote a example usage code. Here it is. (File name : drag-n-drop.js)

作者编写了一个使用代码示例。在这儿。(文件名: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);

In this code... I'm totally frustrated. Which side this code works for? Server side? Or client side code?

在这段代码中……我完全失望。这段代码适用于哪一边?服务器端?或客户端代码?

If server side code, where is the create-server methods and how document.body.~ codes are read?

如果是服务器端代码，那么create-server方法和document.body方法在哪里?~读取代码?

If client side code, how to use 'require' method in the browser?

如果客户端代码，如何在浏览器中使用“require”方法?

Most of all, is this runnable code?

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

Putting aside the previous questions, I tried to run this code. To do that, I installed 'crel', 'feature', 'drag-and-drop-files' modules, and give command : $node drag-n-drop.js

抛开先前的问题，我试着运行这段代码。为此，我安装了“crel”、“feature”、“拖放文件”模块，并给出命令:$node拖放文件

But, it doesn't works, and the error message is like this. This also frustrate me...

但是，它不起作用，错误消息是这样的。这也让我……

[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)

Help!

的帮助!

Update. 3.

更新。3。

Hey. Can I ask you one more question? I'm adapting the filestream module to my code, referencing with the above example code. While doing, I got stuck in the detect('URL') code. I read the 'feature' module in the npm page and read the description carefully, but I still can't understand that. Refer to this page link , I don't know why author use detect('URL'), rather than window.URL. Can you explain it? I really appreciate with you.

嘿。我能再问你一个问题吗?我正在将filestream模块修改为我的代码，并引用上面的示例代码。在此过程中，我陷入了检测(“URL”)代码中。我在npm页面上阅读了“feature”模块，并仔细阅读了描述，但是我还是不能理解。参考这个页面链接，我不知道为什么作者使用检测('URL')而不是windows .URL。你能解释一下吗?我真的很感激你。

1 个解决方案

#1

Question 1:

问题1:

document.body usually is a window object's property, so the example is for client side. Or you can use some module, for example: jsdom. Then you can use window in node.

文档。主体通常是窗口对象的属性，因此示例是客户端。或者您可以使用一些模块，例如:jsdom。然后可以在节点中使用窗口。

require is a function in CommonJS module specifications. you can use browserify or webpack to compile it for client side.

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

Question 2:

问题2:

As above, you should use CommonJS module build tool or use jsdom for server side.

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

createElement is a method on window.document.

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

Update:

更新:

Question 3:

问题3:

require('feature/detect');

要求(功能/检测);

will require detect.js in feature npm module

需要检测。特性npm模块中的js

As you can see, it tests ms, o, moz, webkit prefixs with target feature on window.

正如您所看到的，它测试ms、o、moz、webkit前缀和窗口的目标功能。

In the bottom of below link, there is a Browser compatibility table.

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

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

In Chrome 8.0, Opera 15.0 and Safari 6.0 URL exists as webkitURL.

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

This is why author do that.

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

#1