Я написал проект на Typescript и настроил его для связывания с веб-пакетом.
Основная функциональность заключена в один класс Main
, но он импортирует и другие классы.
Необходимо экспортировать класс Main
и все зависимые в одну библиотеку bundle.js
для использования на других сайтах.
Я пытался объединить классы в отдельный проект (без веб-пакета просто tsc).
это tsconfig.json:
{
"compilerOptions": {
"module": "amd",
"target": "ES2015",
"declaration": true,
"outDir": "./dist",
"outFile": "./dist/index.js",
},
"include": [
"src/**/*"
]
}
но его нельзя использовать, так как ошибка:
ReferenceError: определить не определено
скомпилированный код содержит edfine
define ("Globals", ["require", "exports"], function (require, export) {
, а также с веб-пакетом, но не уверен, что он правильно настроен
файл комплекта начинается с
(function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
другими словами, у меня есть несколько классов:
и я ожидал получить файл bundle.js
и использовать его так:
<script type="text/javascript" src="mylib/dist/index.js"></script>
//...
var a = new Main();
но застрял с пониманием того, как должны работать Typescript и Jsvascript вместе.
Буду признателен за любую помощь
Обновление:
Удалось решить с помощью веб-пакета. Main
доступен из записи app.ts
при компиляции. Так внутри app.ts
добавлен обработчик window.onload
и назначен класс для window
scope.
window.onload = function () {
window['MyClass'] = Main;
Возможно, чего-то не хватает, но не удалось найти хорошую документацию по написанию библиотеки на TypeScript для браузеров.
Update2:
Хорошо. нашел ответ. Опция webpack library
отлично работает.
output: {
filename: "bundle.js",
path: __dirname + "/dist",
library: "MyMainClass"
},
также пришлось изменить параметр tsconfig.json
target
с es6
на es5
{
"compilerOptions": {
"baseUrl": ".",
"paths": { "*": ["types/*"] },
"lib": [
"dom",
"es6",
"dom.iterable",
"scripthost"
],
"module": "commonjs",
"target": "es5"
},
"exclude": [
"node_modules"
]
}