Html 使用 require('fs') 进行浏览器化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16640177/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Browserify with require('fs')
提问by Fred Finkle
I was trying to use browserify on a file that uses the fs object. When I browserify it, the call to require('fs')doesn't get transformed and requirereturns {}.
我试图在使用 fs 对象的文件上使用 browserify。当我浏览它时，对 的调用require('fs')不会被转换并require返回{}.
Is there any workaround for this? I've seen some suggestions on stackoverlow and elsewhere, but none seem to be fully realized.
有什么解决方法吗？我在 stackoverlow 和其他地方看到了一些建议，但似乎没有一个完全实现。
I actually hoped to create a google web packaged app using browserify for a class I teach.
我实际上希望使用 browserify 为我教的课程创建一个谷歌网络打包应用程序。
Thanks in advance.
提前致谢。
采纳答案by Janus Troelsen
Which filesystem should the browser use then? The HTML5 filesystem is not really comparable to a traditional filesystem. It doesn't have symlinks, and it is only accessible asynchronously outside Web Workers.
那么浏览器应该使用哪个文件系统？HTML5 文件系统并不能与传统文件系统相提并论。它没有符号链接，并且只能在 Web Workers 之外异步访问。
So the answer is: Write an abstraction layer yourself that can rely on the fs module when running in Node.js, and the HTML5 FS API when running in the browser. The differences are too large to have browserify translate for you.
所以答案是：自己写一个抽象层，在Node.js中运行时可以依赖fs模块，在浏览器中运行时可以依赖HTML5 FS API。差异太大，无法让 browserify 为您翻译。
回答by substack
If you want to inline file contents from fs.readFileSync()calls, you can use brfs:
如果要内联fs.readFileSync()调用中的文件内容，可以使用brfs：
var fs = require('fs');
var src = fs.readFileSync(__dirname + '/file.txt');
then do:
然后做：
browserify -t brfs main.js > bundle.js
and srcwill be set to the contents of file.txtat compile time.
并将在编译时src设置为 的内容file.txt。
回答by Anish Agarwal
If you want to run file system with browserify you can install npm.
如果你想用 browserify 运行文件系统，你可以安装 npm。
npm install browserify-fs
and you can access fs object on client side.
Thanks
并且您可以在客户端访问 fs 对象。
谢谢
回答by Akash
Is it necessary for you to use require (fs) , you could always use html5 file reader api to read files in javascript.
您是否有必要使用 require (fs) ，您始终可以使用 html5 文件阅读器 api 来读取 javascript 中的文件。
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);
}
});
}
}
you will also have to insert a input file in the html side.
您还必须在 html 端插入一个输入文件。
回答by Richard Vanbergen
For anyone on teh Google's I had much better luck with the stringify transform.
对于谷歌上的任何人，我在 stringify 转换方面的运气要好得多。
https://github.com/JohnPostlethwait/stringify
https://github.com/JohnPostlethwait/stringify
The answers here were frustrating (though not unwelcome) I'm importing templates as strings into my components to save on the HTTP requests bought about by templateUrland keep them out of the Javascript files.
这里的答案令人沮丧（虽然不是不受欢迎）我将模板作为字符串导入到我的组件中，以节省购买的 HTTP 请求templateUrl并将它们排除在 Javascript 文件之外。
For some reason brfsdoes not play nicely with babel and has a lot of caveats to get working at all.
出于某种原因，brfs它不能很好地与 babel 搭配使用，并且有很多需要注意的地方。
I couldn't get browserify-fsto work at all.
我根本无法browserify-fs上班。
However, after finding the stringifytransform it was as simple as.
然而，在找到stringify变换之后，它就这么简单。
import template from '../template.html'
const definition = { template }
component.directive('myDirective', () => definition)
Translated for ES5 users:
为 ES5 用户翻译：
var template = require('../template.html')
component.directive('myDirective', function() {
return {
template: template
}
})
