純 TypeScript - “ReferenceError：未定義導出”

Question

我有一個簡單的客戶端-服務器打字稿應用程序，我的 client.ts 文件中的每個導入語句都會導致ReferenceError: exports is not defined加載 HTML 后瀏覽器中ReferenceError: exports is not defined導出。 項目結構：

root
|-- dist
    |-- public
        |-- client.js
        |-- client.js.map
    |-- src
        |-- index.js
        |-- index.js.map
|-- node_modules
|-- public
    |-- client.ts
|-- src
    |-- index.ts
|-- index.html
|-- package.json
|-- tsconfig.json

我已經閱讀了每個類似的問題，例如如何在純 TypeScript 項目中修復“ReferenceError:exports is not defined”？ 並嘗試了他們建議的一切，但仍然沒有運氣！

Index.ts

import express from "express";
import path from "path";
import http from "http";
import {Server, Socket} from "socket.io";

const app = express();
const server = http.createServer(app);
const io = new Server(server);

// set static folder
app.use(express.static(path.join(__dirname, '../../')));

io.on('connection', (socket: Socket) => {
  console.log('new ws connection');
});

const port = 8080 || process.env.PORT; // default port to listen

// start the Express server
server.listen(port, () => {
  console.log(`server started at http://localhost:${port}`);
});

client.ts

import { io, Socket } from "socket.io-client";
const socket: Socket = io();

package.json

{
  "name": "proto",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
  "scripts": {
    "start": "node dist/src/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/express": "^4.17.13",
    "@types/node": "^16.3.3",
    "tslint": "^5.12.1",
    "typescript": "^3.9.10"
  },
  "dependencies": {
    "express": "^4.17.1",
    "socket.io": "^4.1.3",
    "socket.io-client": "^4.1.3",
  }
}

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "target": "es6",
    "noImplicitAny": true,
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist",
    "baseUrl": ".",
    "paths": {
      "*": [
        "*",
        "src/*",
        "public/*"
      ]
    }
  },
  "lib": [
    "es2015"
  ]
}

client.js來自tsc編譯輸出的結果：

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const socket_io_client_1 = require("socket.io-client");
const socket = socket_io_client_1.io();
//# sourceMappingURL=client.js.map

瀏覽器控制台中的錯誤消息： Uncaught ReferenceError: exports is not defined at client.js:2

Answer 1

問題是對於瀏覽器，您需要捆綁（將所有文件打包在一起）您的代碼。

要做到這一點，你可以使用包裹，的WebPack或browserify

最簡單的方法（對我來說）是使用parcel。 只需將其安裝為開發依賴項

npm i parcel -D

並將構建命令添加到 package.json

...
"build": "parcel index.html"
...

並從 index.html 中引用您的根ts文件。 可能會提示您將 index.html 移動到src文件夾

其他一切，包括熱模塊重新加載、縮小和散列包裹都將為您做。

Parcel 的文檔在這里

如果你想要更靈活的東西，那么 webpack 應該是你的選擇。 Webpack 就像捆綁世界中的 Swiss Knife，它真的很酷，但有時有點復雜。

PS如果你想看看更新的東西 - vite也是一個選擇