用browserify进行预处理？答案

【问题标题】：Preprocessing with browserify?用browserify进行预处理？
【发布时间】：2016-12-02 09:24:08
【问题描述】：

如何使用 browserify 预处理函数调用？

在一个大的 js 文件中，有一次我需要将一个 JSON 对象传递给一个变量，但这个 JSON 对象可能只能由函数调用创建：

var myvar = Ractive.parse('mytemplate.html');

如果我这样写这个函数调用，这行代码就会出现在bundle.js文件中。我只是想要这样的东西：

var myvar = THIS_WILL_RUN_WHILE_BROWSERIFYING(Ractive.parse('mytemplate.html'));

所以在bundle.js 我希望看到类似的东西：

var myvar = [{myobj:4},{x:1,y:2}];

如何使用 browserify（使用 Gulp）实现这一点？

【问题讨论】：

var myvar = [myobj:{x:1,y:2}]; 你的意思是你希望它创建无效的javascript。 :)
我不使用 browserfy，但查看文档 -> github.com/substack/browserify-handbook#transforms 您可能想要创建自己的转换，.. 有一个用 process.cwd() 替换 $CWD 的示例看起来喜欢你可以尝试的东西。
不太清楚你想做什么，而且我已经很久没有使用 Ractive，但你看过github.com/marcello3d/node-ractify 吗？
@Keith 感谢您的领导，我制作了 a minimal transform，它采用 Jade (Pug) 文件并将解析的输出替换为 RACTIVE_PREPARSE('path/to/my-template.jade') 行。谢谢:)（您可以考虑将您的评论移至新答案，顺便说一句）
@cartant 我不知道如何使用 node-ractify。此外，我必须为模板输入提供.jade 文件，node-ractify 似乎不支持。

标签： javascript gulp browserify bundling-and-minification

【解决方案1】：

Browserify 允许您创建自定义转换，以下链接中有一个很好的示例说明如何创建转换。

https://github.com/substack/browserify-handbook#transforms

用process.cwd() 替换$CWD 的示例似乎是OP 创建所需转换的良好起点。

如果将来可能出现死链接，这里是示例。

var through = require('through2');

module.exports = function (file) {
    return through(function (buf, enc, next) {
        this.push(buf.toString('utf8').replace(/\$CWD/g, process.cwd()));
        next();
    });
};

【讨论】：