Window 未在 node.js、sigma.js 和 typescript 环境中定义

Question

我尝试使用 TypeScript 编写的 node.js 设置一个 sigma.js 项目。启动 node.js 服务器后出现以下引用错误：

ts-node index.ts

错误似乎直接发生在 sigma\utils\index.js.

<nodejsproject>\node_modules\sigma\utils\index.js:125
    if (typeof window.devicePixelRatio !== "undefined")
    ^
ReferenceError: window is not defined
    at getPixelRatio (<nodejsproject>\node_modules\sigma\utils\index.js:125:5)
    at Object.<anonymous> (<nodejsproject>\node_modules\sigma\sigma.js:52:45)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (<nodejsproject>\node_modules\sigma\index.js:14:31)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)

我尝试按如下方式设置打字稿配置：

package.json

{
  ...
  "main": "index.ts",
  "scripts": {
    "dev": "nodemon ./index.ts",
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "ts-node index.ts"
  },
  "dependencies": {
    "@types/sigmajs": "^1.0.28",
    "express": "^4.17.2",
    "fs": "^0.0.1-security",
    "graphology": "^0.23.2",
    "graphology-components": "^1.5.2",
    "graphology-layout": "^0.5.0",
    "graphology-layout-forceatlas2": "^0.8.1",
    "papaparse": "^5.3.1",
    "path": "^0.12.7",
    "sigma": "^2.1.3",
    "xhr": "^2.6.0"
  },
  "devDependencies": {
    "@types/express": "^4.17.13",
    "tslint": "^6.1.3",
    "typescript": "^4.5.5"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist",
    "lib": ["dom"]
  },
  "lib": [
    "es2015"
  ],
  "exclude":[
    "./node_modules"
  ]
}

实例化Sigma绘制图形后报错：

router.get('/', (request, response) => {
    
    response.sendFile(path.join(__dirname+'/views/index.html'));
    
    const file = fs.createReadStream(fileLocation);
    
    //Metadata were loaded and parsed
    Papa.parse<{ original_table: string; referenced_table: string }>(file, {
      download: true,
      header: true,
      delimiter: ';',
      complete: (results) => {
        const graph: Graph = new Graph();
            
        //Build the node with their entities as nodes
        results.data.forEach((line) => {

        /* process loaded data to create the graph */

        //Draw the graph within the browser
        const container = document.getElementById("network-container") as HTMLElement;
        
        new Sigma(graph, container); //error occurs right here
      },
    });
});

Answer 1

嗯，不，不是。

Express.js 是一个 server-side 框架，用于生成对 HTTP 请求的响应。它运行在 Node.js 上。它没有 window.

Sigma 是一个图形库，当它嵌入到网页中时（通过 <script> 元素），Web 浏览器将其设计为运行。它通过操纵该网页的 DOM 来工作。

它与 Node.js 或 Express.js 不兼容。

不应将 NPM 上存在的包视为模块与 Node.js 兼容。那里的许多模块旨在供使用 NPM 管理其依赖项的应用程序在 Web 浏览器中使用。（这些应用程序通常是使用 React、Angular 或 Vue 等 SPA 框架编写的应用程序，它们使用 Webpack 或 Parcel 等工具捆绑了它们所依赖的模块）。

Window 未在 node.js、sigma.js 和 typescript 环境中定义

Window is not defined in node.js, sigma.js and typescript environment

javascript

node.js

typescript

express

sigma.js