我有一個使用 webpack typescript 的設定（使用 ts-loader）。
要使用 webpack 啟用代碼拆分，您必須在 tsconfig 中將模塊設定為 esnext：
// tsconfig.json
{
"compilerOptions": {
"module": "esnext"
// other configuration ...
}
}
我試圖this在我的一個檔案中作為引數傳遞。它適用于 node.js，它使用本機 typescript 編譯器在單獨編譯的檔案上運行，但問題是：
在 webpackthis中替換為undefined
我已將其簡化為這個簡單的設定：
打字稿源代碼
export var this2 = this;
輸出tsc：
export var this2 = this;
網頁包輸出：
/*!**********************!*\
!*** ./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;
/******/ })()
;
當檔案中匯出了很多其他內容時，甚至會發生這種情況（因此這不僅僅是空的，因此減少為未定義）
我不是 100% 確定問題出在哪里。但請注意，在沒有typescript的相同設定（所以 webpack javascript source module=esnext）的情況下不會發生這種情況，也不會在將 typescript 編譯為帶有tsc.
我想知道問題出在哪里，以及這是否是出于某種原因的預期行為。
我想要一個檔案在某處注冊該檔案的所有匯出，而不必匯入它（另一個檔案不知道它的存在）。但是這種行為似乎使得無法訪問檔案的匯出并將它們傳遞給函式
最小復制設定
查看此實時 stackblitz 設定
運行webpack或tsc在終端中重新創建輸出/webpack和/tsc
uj5u.com熱心網友回復：
this在 ESM 模塊的頂層具有值undefined. 這是每個規范（鏈接）。所以 Webpack 只是按照規范所說的去做。
如果您希望該值this位于非模塊腳本的頂層，請使用 new(ish) globalThis( spec | MDN )。
在評論中（在你的問題中！）你說過：
我想像通常在 commonjs 中那樣訪問所有檔案的匯出
您可以以一種令人驚訝的方式做到這一點：通過從......本身獲取模塊的模塊命名空間物件！假設您在mod.js. 您可以通過執行以下操作獲取模塊本身的模塊命名空間物件：
// *IN* `mod.js` itself
import * as mod from "./mod.js";
mod將參考具有所有模塊匯出屬性的物件（默認匯出將具有屬性 name 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"
也就是說，如果您想像這樣將事物作為一個單元傳遞，您可能會考慮顯式創建一個物件并匯出該物件。這取決于用例。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/476165.html