如何使用browserify来“require”文本文件？

Question

我正在使用Browserify（使用browserify-middleware），如何require简单的文本文件，例如：

var myTmpl = require("myTmpl.txt");

我检查了stringify插件适用于browserify，但是文档中的代码在browserify V2下无法工作。

- haimke

Answer 1

require() 最适合用于 JavaScript 代码和 JSON 文件，以保持与 Node 的一致性，并提高您的代码对外部人员的可读性，因为外部人员期望 require() 的工作方式与 Node 相同。

如果要加载文本文件，建议使用brfs 转换。使用 brfs，通过调用 fs.readFileSync() 来保持与 Node 的一致性，但 brfs 不像 Node 那样进行同步IO，而是将文件内容内联到包中。

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

变成

var src = "beep boop\n";

在bundle输出中。

只需使用-t brfs编译即可：

browserify -t brfs main.js > bundle.js

关于为什么过度使用重载require()是个坏主意的更多讨论：http://mattdesl.svbtle.com/browserify-vs-webpack

- substack

---

只要所涉及的模块是顶级包树的一部分，这就可以工作——也就是说，不是从使用“npm install”安装的包中所需的。但我不确定browserify的转换是否适用于其他已安装包所需的包。 - kurttheviking

这对我很有帮助，在我的three.js项目中将着色器代码作为字符串插入。 - Air

我认为这个实现很糟糕，特别是因为无法轻松抽象出这个功能并执行像下面这样的操作：function getTemplate(path) { return fs.readFileSync(__dirname + '/' + path, 'utf8'); } - Tyler Biscoe

Answer 2

stringify:

https://github.com/JohnPostlethwait/stringify

这是作者的示例：

var bundle = browserify()
    .transform(stringify(['.hjs', '.html', '.whatever']))
    .add('my_app_main.js');

- Strider

Answer 3

如果你真的想使用require()，你可能需要看一下partialify：

my.txt：

Hello, world!

index.js:

alert( require( "my.txt" ) );

Browserify的配置位置:

var partialify = require( "partialify/custom" );
partialify.alsoAllow( "txt" );

bundle.add( "./index.js" );
bundle.transform( partialify );

理论上，您将在浏览器中收到一个“Hello, world！”的消息。
附注：我自己没有尝试过。 编辑：请注意，此解决方案会破坏 NodeJS 的兼容性 - 它仅在经过 browserify 处理后才能工作，因为 NodeJS 不知道如何 require .txt 文件。

- user1619166

---

这对我有用。只是需要注意 - 如果你这样做并且同时使用babelify，你需要传递一个白名单扩展列表给babelify，以便它只处理你想要的文件（.js，.jsx等），而不是文本文件或其他任何类型的文件。你可以通过传递一个--extensions标志给babelify来实现这一点。 - Elliot Winkler