亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

ES6 模塊的 module.exports 等價物是什么?

ES6 模塊的 module.exports 等價物是什么?

aluckdog 2022-06-16 10:44:29
我有一個用 JavaScript 編寫的現有包,我正在嘗試將其轉換為 TypeScript。我的問題是,module.exportsES6 模塊的等價物是什么?例如,如果我有以下代碼:module.exports = function () {    console.log("Hello World");};我發現在 ES 模塊中執行此操作的唯一方法是執行以下操作。const myFunc = function () {    console.log("Hello World");};export default myFunc;// ORexport { myFunc };當然,這與module.exports = //....這導致了這個問題。當我通過 TypeScript 運行它并獲得輸出的代碼時,包的用戶要么需要使用一個import defaultExport from "module-name";語句(這還不錯),要么require("module-name")他們必須使用而不是能夠訪問它require("module-name").default(如果他們正在使用標準 JS,而不是 TypeScript)。對于標準 JavaScript 用戶來說,這顯然是一個重大的 API 更改。顯然,這里的目標是沒有破壞性的 API 更改(并且不需要更改客戶代碼)。任何解決方案的另一個要求。在包中的其他地方,我需要能夠將許多不同的文件導出為一個對象。所以過去我一直在做:module.exports = {    "thing1": require("./a.js"),    "thing2": require("./b.js")};所以我需要能夠正常導出它而不需要用戶這樣做thing1.default。到目前為止,這似乎是一個更簡單的要求,因為我正在導出一個 ES Modules 似乎處理得很好的對象。當您導出一個單數(未命名)表達式時,它會變得非常棘手。有沒有辦法做到這一點而不必對 API 進行重大更改?
查看完整描述

3 回答

?
牧羊人nacy

TA貢獻1862條經驗 獲得超7個贊

這里的解決方案是使用 TypeScriptexport =命令。這允許您使用require或import與模塊一起使用。


export = function () {

    console.log("Hello World");

};

import myModule from "./lib/myModule";


// OR


const myModule = require("./lib/myModule");

有關更多信息,TypeScript 文檔有一個關于從 JavaScript 遷移的指南,特別是一個名為從模塊導出的部分。


查看完整回答
反對 回復 2022-06-16
?
鳳凰求蠱

TA貢獻1825條經驗 獲得超4個贊

打字稿中最準確的替換module.exports是export default


export default {

    "thing1": require("./a.js"),

    "thing2": require("./b.js")

}

然后你可以像下面這樣使用它們


import myThings from '.....'


查看完整回答
反對 回復 2022-06-16
?
眼眸繁星

TA貢獻1873條經驗 獲得超9個贊

Typescript 建議不要重寫代碼,而是將其配置為允許 js 模塊。


當我們將一個非常大的應用程序從 js 轉換為 TS 時,我們采取了在 TS 中編寫新代碼的立場,并慢慢地將 js 轉換為 ts(但不會花費大量時間來轉換)。


我們需要在 tsconfig.json 中啟用幾個選項,例如:


{

  ...,

  "compilerOptions" : {

    ... 

    "moduleResolution": "node",

    "allowJs": true,

    ...

  },

  "include" [

    "path/to/my/js",

  ]

}

您還需要更新您的webpack.config.js:


module.exports = {

   // ... my settings



   resolve: {

        // Add '.ts' and '.tsx' as resolvable extensions.

        extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]

    },

}


您可能還必須將其聲明require為函數(如果您遇到諸如 之類的錯誤require is undefined):


declare function require(path: string): any;


更多信息可在此處獲得: https ://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html


查看完整回答
反對 回復 2022-06-16
  • 3 回答
  • 0 關注
  • 157 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號