绕过 Babel 将 ES6 "this" 重新映射到 undefined

Question

我正在将代码库迁移到 ES6 类。

我仍在处理一些遗留的 jQuery 模块，这些模块附加了 init 函数，这些函数是从 html 调用的。代码的入口点如下所示：

import * as moduleOne from './module_one/module_one';
import * as moduleTwo from './module_two/module_two';
import * as moduleThree from './module_three/module_three';
import * as moduleFour from "./module_four/module_four";

window.initjQuery = (mod) => {
    eval(mod).init()
}

并且在 HTML:

<script>initjQuery('moduleFour')</script>

所以这有效并且 moduleFour.init() 被正确调用。但我想尽可能避免使用 eval 。问题是 Babel 将 this 重新映射到 undefined 所以我无法做类似的事情：

var _this = this;

window.initjQuery = function(mod) {
   _this[mod].init();
}

有什么解决办法吗？

Answer 1

那些模块名称只是变量（在模块范围内），没有任何对象的属性。请注意 this 在模块中与在严格函数中一样是 undefined。

因此您需要将这些模块对象放在显式对象上：

import * as moduleOne from './module_one/module_one';
import * as moduleTwo from './module_two/module_two';
import * as moduleThree from './module_three/module_three';
import * as moduleFour from "./module_four/module_four";

const modules = {moduleOne, moduleTwo, moduleThree, moduleFour};
window.initjQuery = (mod) => {
    modules[mod].init()
};

绕过 Babel 将 ES6 "this" 重新映射到 undefined

Getting around Babel remapping ES6 "this" to undefined

javascript

browserify

ecmascript-6

babeljs