2

我正在构建一个 3D 多平台电子应用程序，它与 windows 上的 vscode、电子、打字稿、电子打包器、npm、threejs 捆绑在 Photoshop 周围。

不幸的是，Typescript 对我有点不利。每当我编译为 js 时，它都会将 import {x} from "./y" 替换为不必要的 require(y) 和上面的一些导出内容。

这是 index.html：

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <meta http-equiv= "Content-Security-Policy" content="script-src 'nonce-a1b2c3d4'"/>
        <style>body {margin: 0;overflow: hidden;} </style>
        <title>CGVERSE 3D</title>
      </head>
      <body>
        <script nonce="a1b2c3d4" type="module" src="./dist/renderer.js"></script>
      </body>
    </html>

tsconfig.json：


    {
        "compilerOptions": {
            "module": "CommonJS",
            "target": "ES5",
            "moduleResolution": "node",
            "removeComments": true,
            "noImplicitAny": true,
            "outDir": "dist",
            "baseUrl": ".",
          },
          "include": [ ".node_modules/three/src/**/*.ts","src/**/*","./src/**/*.ts" ]
    }

typescript renderer.ts 的导入部分：


    import * as THREE from "../node_modules/three/src/Three.js";

编译后的 renderer.js 的导入部分：


    "use strict";
    var __spreadArrays = (this && this.__spreadArrays) || function () {
        for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
        for (var r = Array(s), k = 0, i = 0; i < il; i++)
            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
                r[k] = a[j];
        return r;
    };
    Object.defineProperty(exports, "__esModule", { value: true });
    var THREE = require("../node_modules/three/src/Three.js");

package.json 在此处添加 "type":"module" 不起作用。：

    {
      "name": "electron-quick-start",
      "version": "1.0.0",
      "description": "A minimal Electron application",
      "main": "./dist/main.js",
      "scripts": {
        "build": "tsc",
        "watch": "tsc -w",
        "lint": "tslint -c tslint.json -p tsconfig.json",
        "start": "npm run build && electron ./dist/main.js",
        "launch": "npx tsc && electron ."
      },
      "repository": "https://github.com/electron/electron-quick-start",
      "keywords": [
        "Electron",
        "quick",
        "start",
        "tutorial",
        "demo"
      ],
      "author": "GitHub",
      "license": "CC0-1.0",
      "devDependencies": {
        "electron": "^9.1.1",
        "electron-packager": "^15.0.0",
        "ts-node": "^8.10.2",
        "typescript": "^3.9.7"
      },
      "dependencies": {
        "dat.gui": "^0.7.7",
        "javascript-state-machine": "^3.1.0",
        "require": "^2.4.20",
        "three": "^0.118.3"
      }
    }

附带说明一下，如果我从 renderer.ts 复制粘贴导入并摆脱所有不必要的 require 和 export 东西，那么所有这些都可以完美运行，这是我绝对不想要的。

对问题。如何强制 Typescript 在 index.html 中使用的模块中不使用 requires，而只使用原始的 typescript 导入？

在对文章、StackOverflow 和 git repos 进行大量研究后，我已经尝试过的事情

    -type: module in package.json
    -tsconfig.json ES5, ES6, commonJS, ES3, etc all combinations.
    -require the compiled .js in the .html with no type="module"
    -nodeIntegration: true
4

0 回答 0