关于html5：使用require(‘fs’)浏览


Browserify with require('fs')

我试图在使用fs对象的文件上使用browserify。 当我对其进行浏览器化时，对require('fs')的调用不会转换，并且require返回{}。

有什么解决方法吗？ 我已经在stackoverlow和其他地方看到了一些建议，但似乎没有一个完全实现。

我实际上希望为我教的课使用browserify创建一个Google Web打包的应用程序。

提前致谢。

如果要从fs.readFileSync()调用内联文件内容，则可以使用brfs：

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

然后做：

1
browserify -t brfs main.js > bundle.js

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

相关讨论

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

1
npm install browserify-fs

您可以在客户端访问fs对象。
谢谢

相关讨论

浏览器应该使用哪个文件系统？ HTML5文件系统实际上无法与传统文件系统相比。它没有符号链接，只能在Web Workers外部异步访问。

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

相关讨论

是否有必要使用require(fs)，您始终可以使用html5文件阅读器api来读取javascript文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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端插入输入文件。

对于使用Google的人来说，使用Stringify转换要好得多。

https://github.com/JohnPostlethwait/stringify

这里的答案令人沮丧(尽管并非不受欢迎)，我正在将模板作为字符串导入到组件中，以保存由templateUrl购买的HTTP请求，并将其排除在Javascript文件之外。

出于某些原因，brfs与babel配合不佳，并且有很多需要注意的地方。

我根本无法使用browserify-fs。

但是，在找到stringify转换后，它非常简单。

1
2
3
4
5
import template from '../template.html'

const definition = { template }

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

针对ES5用户的翻译：

1
2
3
4
5
6
7
var template = require('../template.html')

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