gulp - 使用 browserify 和 debowerify 编译后下划线中的 "this"未定义

Question

所以首先..我有下一个 gulp 任务:

gulp.task('js', function() {
    browserify('./src/js/main.js')
        .bundle()
        .on('error', onError)
        .pipe( source('main.js') )
        .pipe( gulp.dest(path.build.js) );
});

和 package.json:

{
  "browserify": {
    "transform": [
      ["babelify", { "presets": ["es2015"] }],
      "debowerify"
    ]
  },
}

我在 main.js 中导入 Backbone(或仅下划线......没关系)

import Backbone from 'backbone';

在控制台中我收到错误

Uncaught TypeError: Cannot read property '_' of undefined

我检查了代码，发现在库 root 开头的下划线源中未定义

 // Establish the root object, `window` in the browser, or `exports` on the server.
  var root = this;

  // Save the previous value of the `_` variable.
  var previousUnderscore = root._;

我认为问题在于 debowerify 或 babelfy 将代码包装在某些函数中。但是，如果我使用没有 debowerify 的节点模块，一切都可以正常工作。但我想用凉亭。

那么如何解决这个问题呢？

Answer 1

对于这个问题的任何 future 访客，

这类似于 Underscore gives error when bundling with Webpack

问题的要点是 babel 可能正在运行 underscore.js 代码，因为 underscore.js 使用 this , 在 es6 this在函数外部时未定义，自然 this._失败。

在代码中，我通过确保 babel 不在 node_modules 上运行来解决这个问题。