使用Browserify并设置系统文件夹路径

Question

当我使用 Browserify 3.30.2 (browserify file.js -o bundle.js) 编译 markdown-symbols 时，我会得到类似以下的结果：

!function(e){if("object"==typeof exports...[function(_dereq_,module,exports){

},{}],2:[function(_dereq_,module,exports){
...
...
[on line 8000] 
    : function (str, start, len) {
        if (start < 0) start = str.length + start;
        return str.substr(start, len);
    }
;

}).call(this,_dereq_("C:\\Users\\Me\\AppData\\Roaming\\npm\\node_modules\\browserify\\node_modules\\insert-module-globals\\node_modules\\process\\browser.js"))
},{"C:\\Users\\Me\\AppData\\Roaming\\npm\\node_modules\\browserify\\node_modules\\insert-module-globals\\node_modules\\process\\browser.js":11}],14:[function(_dereq_,module,exports){
module.exports=_dereq_(3)
},{}],15:[function(_dereq_,module,exports){
module.exports=_dereq_(4)
},{"./support/isBuffer":14,"C:\\Users\\ME\\AppData\\Roaming\\npm\\node_modules\\browserify\\node_modules\\insert-module-globals\\node_modules\\process\\browser.js":11,"inherits":10}],16:[function(_dereq_,module,exports){
var frep = _dereq_('frep');
var file = _dereq_('fs-utils');
var delims = _dereq_('delims');
var _ = _dereq_('lodash');
...

你可以看到这里有我的文件的绝对路径。为什么？如何删除它们？

编辑：这是我的build.js文件

 var browserify = require('browserify-middleware')
fs = require('fs');
var b = browserify('./index.js', {
    'opts.basedir': './'
});
b({
    // Mocks up express req and res
    headers: []
}, {
    getHeader: function () {},
    setHeader: function () {},
    send: function (a) {
        console.log('send', a);
    },
    end: function (a) {
        //console.log('end', a.constructor.name);
        //  fs.write('bundle.js', a, undefined, undefined, function (err) {
        console.log(a.toString());
        //});
        //  a.pipe(fs.createWriteStream('bundle.js'));
    },

});

运行node build > bundle.js时，遇到了同样的问题。如果我将basedir的值替换为例如ihatebrowserify，则会出现关于未解析某个内容的错误。

- Vinz243

---

你使用的 Browserify 版本是什么？ - James Kyburz

这是“insert-module-globals”模块中的一个漏洞。已有一个修复该漏洞的拉取请求：https://github.com/substack/insert-module-globals/pull/31 - Ross Allen

@ssorallen 非常感谢你！ - Vinz243

@Vinz243，你最终解决了这个问题吗（也就是说，没有本地路径泄露到browserify的js中）？现在已经过去5个多月了，我遇到了完全相同的症状，而且使用的都是最新版本... :( - Bruno Reis

很遗憾，我没有这样做。 - Vinz243

Answer 1

今天我也遇到了这个问题。原来现在有一个布尔选项--full-path[0]可以解决这个问题。

例如：

browserify -o bundle.js --full-path=false index.js

[0] https://github.com/substack/node-browserify/blob/master/bin/args.js

这是一个指向node-browserify的GitHub页面链接，其中包含有关命令行参数的信息。

- Song Gao

---

好的，这将删除绝对路径，但现在我在bundle.js的顶部收到“无法读取未定义的属性'addEventListener'”... :( - Unispaw

@Unispaw 听起来像是另一个问题。只有在添加 --full-path=false 开关时才出现了吗？ - Song Gao

Answer 2

将近6个月后，我发现了同样的问题。现在我找到了一个适合我的解决方法，其他人也可能会从中受益。

谷歌给出了这个问题报告：https://github.com/thlorenz/browserify-shim/issues/43 -- 报告了“browserify-shim”上的本地系统路径泄露问题，尽管据我所知，这是一个“browserify”问题。

该问题建议采用以下解决方法：

$ npm install -g intreq browser-pack browser-unpack
$ browserify example/main.js -t browserify-shim | browser-unpack | intreq | browser-pack

我已测试过并对结果感到满意。然而，我想进一步将其集成到我的Gruntfile.js中。我找到了一个解决方案，进行了测试，并让我感到满意，那就是使用unpathify：

压缩browserify require路径以实现更好的代码最小化，即require('some/long/path') => require(1)

要使用它，只需安装unpathify (npm install --save-dev unpathify)，并将其添加到您的构建中：

grunt.initConfig({
  browserify: {
    all: {
      files: {
        'build/all.js': ['some/file.js']
      }
    }
  },
  unpathify: {
    all: {
      src: ['build/all.js']
    }
  }
  // ...
}

- Bruno Reis

Answer 3

Browserify将绝对路径作为默认路径解析。如果您不想看到绝对路径，可以根据需要设置options.basedir。例如：

var browserify = require('browserify-middleware');
var b = browserify({'opts.basedir': './'});

- Hüseyin BABAL

---

我应该把什么放在 your_path 中？C:\\Users\\Me\\AppData\\Roaming\\npm\\node_modules\\？\.？markdown-symbols？我把 browserify 放在本地模块中了。 - Vinz243

看到了，你已经指定了基础目录。但是，在你编辑之前我已经回答了你的问题。 - Hüseyin BABAL

@HüseyinBabel，我不太明白你的意思。我在build.js的第4行('opts.basedir': './')中声明了基本目录吗？难道你指的是./index.js吗？如果我把它删除，它就无法工作（异常）。如果我删除 - Vinz243

在 build.js 中，你已经声明了 opts.basedir。我说过，当我回答你的问题时，你的问题上没有“编辑”部分。 - Hüseyin BABAL

你没有理解我的意思。我在不知道你已经使用了opts.basedir的情况下回答了你的问题。之后，你编辑了你的问题，并且已经在使用opts.basedir。所以我的解决方案不起作用了。在添加了opts.basedir：'./'之后，路径的新输出是什么？ - Hüseyin BABAL

Answer 4

我猜测问题出在某个地方包含了绝对路径的模块。

在使用browserify时，我没有遇到这个问题。

---

实际上这不仅仅是我的猜测。

},{}],2:[function(_dereq_,module,exports){
...
...
}).call(this,_dereq_("C:\\Users\\Me\\AppData\\Roaming\\npm\\node_modules\\browserify\\node_modules\\insert-module-globals\\node_modules\\process\\browser.js"))
},{"C:\\Users\\Me\\AppData\\Roaming\\npm\\node_modules\\browserify\\node_modules\\insert-module-globals\\node_modules\\process\\browser.js":11}],14:[function(_dereq_,module,exports){

您需要使用_dereq_("C:\\Users\\Me\\AppData\\Roaming\\npm\\node_modules\\browserify\\node_modules\\insert-module-globals\\node_modules\\process\\browser.js")，因此必须包含该模块。

如果您在Windows上设置了一些Node全局变量来查找C:\\Users\\Me\\AppData\\Roaming\\npm\\node_modules，则可能不需要包含完整路径，但我不能确定。

- Scimonster

---

谢谢！我会搜索如何做到这一点。 - Vinz243

您可能还想直接在项目中包含 process 包。这样可以避免访问完整路径的需要。 - Scimonster

这与源映射有关吗？https://github.com/substack/node-browserify/issues/663 - Vinz243

请问一下，您能告诉我如何在其他操作系统上进行更改节点全局设置吗？（我确实有Windows系统，但这只是为了求助） - Vinz243

Answer 5

不完全确定这是否是对原问题的回答，但我遇到了类似的问题。捆绑的js文件和外部sourcemap（使用exorcist）生成时包含了我的系统上文件夹的绝对路径。在头痛难解的情况下，它似乎是babelify（以前是6to5ify）的罪魁祸首。解决方案很简单： browserify --debug -t [ babelify --sourceMapRelative . ] 或者 browserify({ debug: true }).transform(babelify.configure({ sourceMapRelative: '.' }))

- jonbo

---

谢谢，但我没有使用babelify。 - Vinz243

Answer 6

Browserify 的作者推出了一个新的插件。它叫做 Bundle-Collapser。它可以用数字索引替换文件夹路径。

- Ryan