Babel 和 typeahead 的问题答案

【问题标题】：Issue with Babel and typeaheadBabel 和 typeahead 的问题
【发布时间】：2016-08-11 16:27:19
【问题描述】：

在 node.js 项目中使用 babel 时，我试图将我的所有文件捆绑到一个经过转译和缩小的 js 文件中。

我正在使用 gulp-babel 6.1.2 运行 babel，我已经安装了 ES-2015 预设 (6.13.2)。

我正在用我的文件构建一个捆绑包，并且预先输入 0.11.1，问题是当运行 gulp 任务并通过 babel 管道时，typeahed 功能不起作用（未捕获的 TypeError：无法设置属性 'Bloodhound'不明确的）。如果我再次运行任务，从管道中删除 babel 命令，一切正常。

我知道我可以构建两个单独的包，一个用于我的文件，另一个用于外部文件，但我想知道它为什么会失败。

我的吞咽任务：

gulp.task('bundleCheckoutDesktopJs', function () {
var js = ['./src/js/project/external/*', './src/js/project/common/*', './src/js/project/*'];

return gulp.src(js)
    .pipe(babel())
    .pipe(concat('project.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('statics/js/'));
});

我在调查了一段时间后取得的结果（typeahead.js）：

(function(root, factory) {
   if (typeof define === "function" && define.amd) {
      define("bloodhound", [ "jquery" ], function(a0) {
          return root["Bloodhound"] = factory(a0);
      });
   } else if (typeof exports === "object") {
      module.exports = factory(require("jquery"));
   } else {
     // Root seems to be undefined here....
     root["Bloodhound"] = factory(jQuery);

   }
})

任何帮助将不胜感激，在此先感谢。

【问题讨论】：

你有没有设法解决这个问题？

标签： javascript node.js gulp typeahead.js gulp-babel

【解决方案1】：

插件代码：在立即调用函数中，将第一个参数设为window。如果使用箭头函数，可能找不到this 上下文。

/*!
 * typeahead.js 0.11.1
 * https://github.com/twitter/typeahead.js
 * Copyright 2013-2015 Twitter, Inc. and other contributors; Licensed MIT
 */

(function(root, factory) {
    if (typeof define === "function" && define.amd) {
        define("bloodhound", [ "jquery" ], function(a0) {
            return root["Bloodhound"] = factory(a0);
        });
    } else if (typeof exports === "object") {
        module.exports = factory(require("jquery"));
    } else {
        root["Bloodhound"] = factory(jQuery);
    }
})(this, function($) { // here replace 'this' with window

【讨论】：

这在我的情况下有效。