Как использовать машинописный текст для разработки пользовательских символов PI Vision

Я разрабатываю пользовательский компонент для инструмента под названием PI Vision. Он использует AngularJS, и для создания пользовательских компонентов вы должны включить в папку component-template.html, component.js, и он динамически загружает новый компонент.

файл component.js должен быть в следующем формате:

(function (CS,d3) {

// SOME MANDATORY CODE WITH THIS window.PIVisualization

// SOME CUSTOM CODE, WITH MY LOGIC

})(window.PIVisualization,d3);

Что я пытаюсь сделать, так это использовать TypeScript для создания этого component.js со всеми преимуществами использования машинописного текста в качестве поддержки ES6 и прочего. Но проблема в том, что когда я пытаюсь разделить логику на файлы, я не могу вывести в один файл простой javascript.

У меня есть мой основной компонент .js с:

import { MyClass } from "./myclass"

(function (CS,d3) {

// STUFF

let x = new MyClass("test");

// MORE STUFF

})(window.PIVisualization,d3);

myclass.ts имеет:

export class MyClass {
    constructor(nome: string) {
        return nome;
    }
};

tsconfig.json тестировался с модулем AMD и файлом outFile "./build/component.js"

На выходе получается что-то вроде

define("testclass", ["require", "exports"], function (require, exports) {
    "use strict";

И я не верю, что это будет работать в браузере.

То, что я ищу, - это способ, при котором при транспиляции результатом будет один файл с определением myclass до IIFE (желательно пространство имен) и IIFE, использующий этот класс.


typescript es6-modules tsconfig
person rafrcruz    schedule 27.06.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это ожидаемый результат для "module AMD"; если вы не используете загрузчик модулей, включая тип, включенный в более новые версии Javascript, похоже, вам нужен модуль «Нет». См. документы Typescript для --module, хотя, конечно, вы можете указать что в вашем tsconfig.json.

Обратите внимание, что выходные данные Javascript будут использовать IIFE по умолчанию; если вы хотите изменить способ инкапсуляции вашего кода, вам может потребоваться изменить входные данные Typescript, и в этом случае ваш вопрос может выиграть от публикации вывода --module=None по сравнению с вашими ожиданиями.

person Jeff Bowman    schedule 27.06.2019
comment
Да, я полагал, что в таком случае использование модуля None имеет смысл, но не устарел ли он? А если нет, то как мне импортировать логику из других файлов? На данный момент я просто использую класс в отдельном файле, но когда транспайл объединяет файлы, сгенерированный класс находится в глобальной области. Я попробовал что-то вроде пространства имен MyNamespace { class MyClass() {structor() {} } }, но тогда я больше не могу использовать его в этом пространстве имен. - person rafrcruz; 27.06.2019
comment
@rafrcruz Да, это устарело, но похоже, что вы пытаетесь написать что-то, что работает непосредственно в браузере ES5, и это ограничит ваши возможности. Если вам удобно полагаться на загрузчик модулей, который определяет define, например require.js, или удобно создавать модуль, который затем компилируется на уровне Javascript с помощью такого инструмента, как webpack, тогда ваши возможности улучшатся. - person Jeff Bowman; 02.07.2019