从具有一些功能(全局、工厂)的文件导入

Question

我有一个使用function(global, factory)的遗留代码，如下所示：

// legacy.js
(function (global, factory) {
if (typeof define === 'function' && define.amd) {
console.log('my amd One');
define([], factory);
} else if (typeof module !== 'undefined' && module.exports) {
console.log('my cjs One');
module.exports = factory();
} else {
console.log('my esm One');
global.One = factory();
}
})(this, function () {
console.log('hello One');
function One(options) {
console.log("function One", options);
var self = this;
self.connect = (url) => {
console.log('One.connect: ' + url)
}
}
One.prototype.myone = function (roomId, token) {
console.log('myone: ' + roomId + ', ' + token);
}
return One;
});
(function (global, factory) {
if (typeof define === 'function' && define.amd) {
console.log('my amd Two');
define([], factory);
} else if (typeof module !== 'undefined' && module.exports) {
console.log('my cjs Two');
module.exports = factory();
} else {
console.log('my esm Two');
global.Two = factory();
}
})(this, function () {
console.log('hello Two');
function Two(options) {
console.log("function Two", options);
var self = this;
self.connect = (url) => {
console.log('Two.connect: ' + url)
}
}
Two.prototype.mytwo = function (roomId, token) { 
console.log('mytwo: ' + roomId + ', ' + token);
};
return Two;
});
(function (global, factory) {
if (typeof define === 'function' && define.amd) {
console.log('my amd Three');
define([], factory);
} else if (typeof module !== 'undefined' && module.exports) {
console.log('my cjs Three');
module.exports = factory();
} else {
console.log('my esm Three');
global.Three = factory();
}
})(this, function () {
console.log('hello Three');
function Three(options) {
console.log("function Three", options);
var self = this;
self.connect = (url) => {
console.log('Three.connect: ' + url)
}
}
Three.prototype.mythree = function (roomId, token) { 
console.log('mythree: ' + roomId + ', ' + token);
};
return Three;
});

我用babel设置了webpack，这样我就可以import所有的One、Two、Three，并希望从ES6代码中使用它，但我似乎只能使用最后定义的Three。。

我正在导入并在我的es6.js 中使用它

// es6.js
import One from './legacy'
// const legacy = require('./legacy')
// console.log(legacy)
// console.log(legacy.One)
console.log(One) // prints out Three
function initTest() {
const one = new One('hw');
console.log('one: ', one); // prints out an instance of Three
// one.myone('room1', 'token1'); // this will crash, myone is undefined but idk why??
one.mythree('room1', 'token1'); // works
}
document.addEventListener('DOMContentLoaded', () => {
initTest();
})

有人知道我应该怎么做才能正确访问One和Two吗？我尝试过使用名为import {One, Two, Three}或const legacy = require('./legacy');的，但没有成功。。

Answer 1

坦率地说，这个模块坏了。

如果您将其加载为CommonJS模块(您就是这样(，那么每个IIFE都会调用一行，如下所示：

module.exports = factory();

因此，第一个IIFE将One指定为导出的对象。然后第二个IIFE用Two覆盖，第三个用Three覆盖。

这些IIFE被设计为不在同一文件中。

将它们移动到单独的文件中。