Question

总体而言，我对打字稿和网络资料还很陌生，所以请原谅我的无知。我测试了我正在从事的项目中GoldenLayout的使用。它可以在javascript中正常工作，但是该项目使用TypeScript，因此我不得不进行迁移。代码本身应该有效，但是我在导入时遇到了麻烦。导入“ golden-layout”后，虽然可以很好地编译代码，但是无法在浏览器中执行生成的.js文件。根据我如何设置tsconfig以及如何导入“ golden-layout”，错误会有所不同。

由于我听说如果在tsconfig.json中将模块处理设置为错误的方式，则在浏览器中执行代码可能会失败，因此我尝试了多种方法。在compilerOptions中将Module-Tag设置为“ esnext”，“ amd”，“ commonJS”和大多数其他代码会导致您在下面看到的javascript代码。在浏览器中运行它时，控制台将显示以下错误：“ ReferenceError：未定义导出” 删除引起此问题的行时（因为我读过其他人的问题，这会引起错误，并通过更改tsconfig删除它应该可以解决该问题，但我无法消除它，因此我尝试手动删除它），则弹出另一个错误。 “ ReferenceError：未定义require”。

如果我使用“ import * as from Golden-layout”作为GoldenLayout，则对Module-Tag使用“ system”会导致相同的问题；”导入。使用“ import GoldenLayout = require（” golden-layout“）;”作为import语句，上面详述的其他设置与以前基本相同，但是对于系统而言，它导致Javascript稍有更改，从而导致了另一个问题。 js文件的顶部出现“ System.register（[“ golden-layout”]，函数（exports_1，context_1）{”，导致“ ReferenceError：未定义系统”错误。

我已经读过我应该使用require.js，但是我的教授告诉我我不必这样做。这个小实验是实现WebGL的较大项目的一部分。由于主项目在任何地方都不使用任何包含语句，因此我必须假设自己做错了什么，但是到目前为止，没有人可以帮助我，而且我在网上找到的所有内容也都没有帮助。我要么太愚蠢，无法找出明显的东西，要么我不得不为黄金布局做些额外的事情。

Golden-Layout带有index.d.ts，因此，根据我能找到的所有资源，导入它应该相当容易，确实如此，但是以这种方式运行代码似乎是不可能的。

如果有人能以正确的方向将我指向正确的方向，我将非常感激。

app.ts

/// <reference path="../node_modules/@types/golden-layout/index.d.ts"/>
import * as GoldenLayout from "golden-layout";

let myLayout:GoldenLayout;
let savedState:string;
let config:GoldenLayout.Config = {
...

app.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/// <reference path="../node_modules/@types/golden-layout/index.d.ts"/>
const GoldenLayout = require("golden-layout");

let myLayout;
let savedState;
let config = {
...

tsconfig.json

{
  "compilerOptions": {
    /* Basic Options */
    "target": "esnext",                          
    "module": "esnext",
    "declaration": true, 
    "sourceMap": true,
    "composite": true,
    "noImplicitAny": true,
    "typeRoots": [
      "node_modules/@types"
    ],
  },
  "compileOnSave": true

}

在打字稿项目中为浏览器应用程序导入外部库（黄金布局）的问题

0 个答案: