使用 require('fs') 的 Browserify

Question

我试图在一个使用fs对象的文件上使用browserify。当我用browserify打包后，调用 require('fs') 没有得到转换，require 返回了 {}。

有没有任何解决方法？我在stackoverflow和其他地方看到了一些建议，但似乎都没有完全实现。

实际上，我希望为我教授的一个课程创建一个使用browserify的Google Web封装应用程序。

提前感谢。

- Fred Finkle

Answer 1

如果您想要内联来自fs.readFileSync()调用的文件内容，您可以使用brfs：

var fs = require('fs');
var src = fs.readFileSync(__dirname + '/file.txt');

然后执行：

browserify -t brfs main.js > bundle.js

src将在编译时被设置为file.txt的内容。

- substack

---

有趣的想法，但不符合我的需求。 - Fred Finkle

Answer 2

如果您想使用browserify运行文件系统，可以安装npm。

npm install browserify-fs 

你可以在客户端访问文件系统对象。
谢谢

- Anish Agarwal

---

我已经安装了browserify-fs并且引用了它，但是我仍然遇到了同样的错误，错误提示为“fs.readFileSync不是一个函数”。 - Preprocezzor

Answer 3

那么浏览器应该使用哪个文件系统呢？HTML5文件系统与传统文件系统不是真正可比较的。它没有符号链接，只有在Web Worker之外异步访问才能实现。

因此答案是：自己编写一个抽象层，可以在Node.js中依赖fs模块，在浏览器中依赖HTML5 FS API。由于差异太大，无法使用browserify进行翻译。

- Janus Troelsen

---

我猜测至少应该期望Browserify在其输出的代码中留下一条注释，表明它不支持fs模块。 - Fred Finkle

也许在这里使用“抽象层”不太合适，但是在node.js中实现FileReader等功能可能是一个好的选择（作为browserify的一部分）。无论如何，我很高兴知道缺失的转换是一种特性，而不是我的“错误”。 - Fred Finkle

Answer 4

你是否需要使用 require (fs) ，你可以在 JavaScript 中始终使用 HTML5 文件读取器 API 来读取文件。

window.onload = function() {
    var fileInput1 = document.getElementById('fileInput');
    if (fileInput1){
        fileInput1.addEventListener('change', function(e) {
            var file = fileInput1.files[0];
            var textType = /text.*/;

            if (file.type.match(textType)) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    console.log(reader.result);
                  }    
                reader.readAsText(file);                    
            } 
        });
    }
}

您还需要在HTML页面中插入一个输入文件。

- Akash

Answer 5

对于任何使用Google的人，我在使用字符串转换时运气更好。

https://github.com/JohnPostlethwait/stringify

这里的答案令人沮丧（虽然不是不受欢迎），我将模板作为字符串导入到我的组件中，以节省由于templateUrl而带来的HTTP请求，并将它们从Javascript文件中分离出来。

由于某种原因，brfs与babel不兼容，并且有很多注意事项才能使其正常工作。

我根本无法让browserify-fs正常工作。

但是，在找到stringify转换之后，一切都变得简单了。

import template from '../template.html'

const definition = { template }

component.directive('myDirective', () => definition)

为ES5用户翻译：

var template = require('../template.html')

component.directive('myDirective', function() {
    return {
        template: template
    }
})

- Richard Vanbergen