Question

我正在构建一个3D多平台电子应用程序，该应用程序在photoshop周围捆绑在一起，并在Windows上使用vscode，electron，打字稿，电子封装程序，npm和threejs。

不幸的是，Typescript对我不利。每当我编译为js时，它都会使用不必要的require（y）以及从其上方的一些导出内容来替换“ ./y”中的import {x}。

这是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" ]
    }

打字稿渲染器的导入部分。


    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中使用的模块中不使用require，而只使用原始的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

打字稿+电子+ ThreeJS导入模块转换为要求

0 个答案: