Проблемы с импортом внешней библиотеки (golden-layout) в проекте машинописного текста для браузера. - PullRequest
Новая
       19

Проблемы с импортом внешней библиотеки (golden-layout) в проекте машинописного текста для браузера.

0 голосов
/ 26 апреля 2019

Я все еще очень плохо разбираюсь в машинописи и веб-материалах, поэтому, пожалуйста, извините меня за мое невежество.Я проверил использование GoldenLayout для проекта, над которым я работаю.Он работает в JavaScript достаточно хорошо, но проект использует TypeScript, поэтому мне пришлось мигрировать.Сам код должен работать, но у меня проблемы с импортом.Несмотря на то, что я могу скомпилировать код после импорта «золотого макета», я не могу выполнить созданный файл .js в браузере.В зависимости от того, как я установил tsconfig и как я импортирую «golden-layout», ошибки могут отличаться.

Поскольку я слышал, что выполнение кода в браузере может завершиться ошибкой, если в tsconfig.json неправильно задана обработка модулей, я попробовал несколько подходов.Установка Module-Tag в compilerOptions на «esnext», «amd», «commonJS» и большинство других приводит к коду javascript, который вы можете увидеть ниже.При запуске в браузере консоль выдает мне следующую ошибку: «ReferenceError: export не определен». При удалении строки, вызывающей эту проблему (потому что я читаю на чьей-то другой проблеме, эта проблема вызывает ошибки и удаляется путем измененияРешение должно решить tsconfig, но я не смог его удалить, поэтому попытался удалить его вручную), появляется другая ошибка.«ReferenceError: require is notfined».

Использование «system» для Module-Tag приводит к той же проблеме, если я использую «import * as GoldenLayout из« golden-layout »;»импортировать.С "import GoldenLayout = require (" golden-layout ");"Как указано в операторе импорта, другие параметры, описанные выше, имеют в основном ту же проблему, что и раньше, но с системой, это приводит к слегка измененному Javascript, который вызывает другую проблему.«System.register ([« golden-layout »], function (exports_1, context_1) {» появляется в верхней части файла js, что приводит к ошибке «ReferenceError: System is notfined»).

Iпрочитал, что я должен использовать require.js, но мой профессор сказал мне, что не должен. Этот небольшой эксперимент является частью более крупного проекта, который реализует WebGL. Так как основной проект нигде не использует оператор include, у меня естьпредположить, что я делаю что-то не так, но никто не мог мне помочь до сих пор, и все вещи, которые я нашел в Интернете, тоже не очень помогли.-layout.

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

}
...