如何运行 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'模块，仔细看了说明，还是看不懂。参考这个页面 link ，我不知道为什么作者使用 detect('URL')，而不是 window.URL。你能解释一下吗？非常感谢你。

Answer 1

问题 1：

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

require 是 CommonJS module specifications. you can use browserify or webpack 中的一个函数，用于为客户端编译它。

问题 2：

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

createElement 是 window.document.

上的一个方法

更新：

问题 3：

require('feature/detect');

将在 feature npm 模块

中需要 detect.js

如您所见，它测试 ms、o、moz、webkit 前缀和 window 上的目标特征。

下面link下面有个Browser compatibilitytable.

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

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

的形式存在

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

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

How to run npm 'filestream' example code?

javascript

filestream

node.js

npm

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

How to run npm 'filestream' example code?

javascript

filestream

node.js

npm

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