这被更改为未定义与 webpack + 打字稿 + 模块 = "esnext"

Question

我有一个webpack + typescript的设置(使用ts-loader)

要使用webpack来启用代码分割，你必须在tsconfig中设置module为esnext:

// tsconfig.json
{
"compilerOptions": {
"module": "esnext"
// other configuration ...
}
}

我试图传递this作为我的一个文件的参数。它在node.js上工作，node.js使用本地typescript编译器在单独编译的文件上运行，但问题是:

webpackthis

中的被undefined取代

我把它简化成这样简单的设置:

Typescript源代码

export var this2 = this;

tsc输出:

export var this2 = this;

Webpack输出:

/*!**********************!*
!*** ./src/index.ts ***!
**********************/
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "this2": () => (/* binding */ this2)
/* harmony export */ });
var this2 = undefined;
/******/ })()
;

甚至当文件中导出了很多其他内容时也会发生这种情况(所以这不仅仅是空的，因此减少为未定义)

我不能百分之百确定问题出在哪里。但是请注意，不会发生在没有typescript的相同设置下(所以webpack + javascript source + module=esnext)和也不会发生在将typescript编译为javascript的nodejs与tsc。

我想知道问题出在哪里，这是否是出于某种原因的预期行为。

我想要一个文件在某个地方注册该文件的所有导出，而不必导入它(另一个文件不知道它的存在)。但是这种行为似乎使访问文件的导出并将其传递给函数

变得不可能。最小复制设置

查看实时stackblitz设置

在终端上运行webpack或tsc，重建/webpack和/tsc的输出

Answer 1

ESM模块顶层的this的值为undefined。这是每个规范(链接)。所以Webpack只是在做规范所说的。

如果您希望this在非模块脚本的顶层具有的值，请使用新的(ish)globalThis(spec | MDN)。

在评论(和你的问题!)你说:

我想访问所有文件的导出，就像在commonjs中通常做的那样

你可以用一种令人惊讶的方式做到这一点:通过从…本身获取模块的模块命名空间对象!假设你在mod.js中这样做。您可以通过以下命令获取模块本身的模块命名空间对象:

// *IN* `mod.js` itself
import * as mod from "./mod.js";

mod将引用一个对象，该对象具有模块所有导出的属性(默认导出将具有属性名称default)。下面是一个完整的例子:

export const a = 42;
export const fn = () => { };
import * as mod from "./mod.js";
console.log(mod.a);        // 42
console.log(typeof mod.fn) // "function"

也就是说，如果你想像那样把东西作为一个单元来传递，你可以考虑显式地创建一个对象并导出该对象。这取决于用例。