Как импортировать модуль JavaScript на основе IIFE в приложение Angular TypeScript?
В рамках веб-приложений мы должны поддерживать стандартную структуру папок. i.e ProjectFolder, а затем внутри папки WEB-INF, которая состоит из файла web.xml, должна быть там.
Мы можем хранить файлы jsp в любом месте в каталоге проекта. Исходя из этого, мы должны создать URL.
Пример: у меня есть проект «Демо» и «WEB-INF» доступен, а WEB-INF содержит файл web.xml. All all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all теперь я разместил папку «myjsp» непосредственно в папке «Demo».
Итак, я должен получить доступ к этим jsp, используя следующий URL. All all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all
- Если мы помещаем файлы jsp вне папки WEB-INF в каталог проекта, мы можем напрямую обращаться к этим ресурсам jsp или net, создавая URL-адрес. All all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all ex:
Сценарий 3: Я разместил файлы jsp ex: jsp1, jsp2, jsp3 .. внутри папки «myjsp». теперь я разместил папку «myjsp» внутри папки «WEB-INF».
Теперь мы не сможем напрямую обращаться к этим страницам jsp, так как каталог WEB-INF является частной. all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all all Демо / jsp1]
Здесь мой serverurl = localhost и номер порта = 8080
2 ответа
Вы можете обернуть сторонний SDK в модуле TypeScript, используя хак с eval.
Предположим, что ThirdPartySDK.js выглядит следующим образом:
var ThirdPartySDK = (function () {
var exports = {
foo: function () { console.log("Hello, world!"); }
};
return exports;
})();
Затем вы создадите модуль ThirdPartySDK-wrapper.ts, который будет выглядеть примерно так:
import * as fs from 'fs';
const script = fs.readFileSync('../lib/ThirdPartySDK.js').toString();
global.eval(script);
//@ts-ignore
export default ThirdPartySDK;
@ts-ignore требуется, чтобы компилятор TypeScript не жаловался на то, что не нашел объявление для переменной ThirdPartySDK (это объявляется в сценарии, выполняемом через eval).
Затем вы можете импортировать ThirdPartySDK через модуль оболочки:
import ThirdPartySDK from './wrapper';
ThirdPartySDK.foo(); // Console output: "Hello, world!"
Обратите внимание, что эта оболочка работает только для приложений, работающих в Node.js, поскольку она использует fs.fileReadSync для получения содержимого скрипта.
Если вы собираетесь использовать его в браузере, вам понадобится другой способ получить скрипт. Возможно, вы могли бы использовать такие инфраструктуры, как WebPack, для связывания скрипта ThirdPartySDK в виде строкового значения, которое вы можете require в модуле оболочки.
Лучший способ получить правильный оператор импорта для фактического значения из ThirdPartySDK - это рефакторинг скрипта в модуль, который экспортирует это значение. Следующий фрагмент позволяет использовать оператор импорта, как показано:
export const ThirdPartySDK = {
foo() { console.log('Doing foo'); }
};
Для больших библиотек рефакторинг не всегда так прост, поэтому я вижу 2 подхода, которые не требуют слишком много рефакторинга:
1. Экспортируйте переменную ThirdPartySDK
Вы можете просто сделать модуль из файла IIFE, экспортировав текущую переменную IThirdPartySDK (возвращаемую IIFE), а затем импортировать ее, как показано: [ 1120]
export const ThirdPartySDK = (function() {
var _export = {};
// Add some methods to export
return _export;
})();
Обратите внимание, что если вы хотите получить некоторую полезную информацию о форме ThirdPartySDK, вам нужно будет добавить аннотацию типа в объявление const, и если SomeType (см. Ниже) делает еще не существует, вам придется написать это самостоятельно:
export const ThirdPartySDK: SomeType = (function() {
// ...
В этот момент Typescript начнет жаловаться на то, что выражение IIFE не может быть присвоено SomeType; быстрое «решение», чтобы сказать машинописи, что она притворяется, выражение оценивается как значение типа SomeType с использованием ключевого слова as:
export const ThirdPartySDK: SomeType = (function() {
// ...
})() as SomeType;
2. Сохраните тег <script> и объявите переменную
Другой вариант - сохранить тег script, ничего не импортировать, а объявить переменную и ее ожидаемую наберите машинопись:
(но и в этом случае вам может потребоваться предоставить определения типа самостоятельно)
interface SomeType {
// SDK type shape goes here...
}
declare const ThirdPartySDK: SomeType;