Typescript и exports — как собрать для браузера без вебпака?

Question

[Kyubey]

Здравствуйте. У меня есть проект на typescript. Когда я компилирую его, проблем никаких нет - все js-файлы генерируются. Тем не менее, в браузере это не работает из-за ошибки с экспортами:

Uncaught ReferenceError: exports is not defined

Проблема здесь в том, что в сгенерированных js-файлах присутствует вот эта строка:

Object.defineProperty(exports, "__esModule", { value: true });

, которая вызывает проблемы, потому что браузер не знает никаких exports. Она там появляется независимо от того, что я выставлю в module и target в tsconfig.json.

TL;DR: я хочу иметь возможность импортить import ... from "...", но при этом не терять возможности дебажить тайпскрипт в браузере.

Опишу на примере библиотеки uikit.

Прежде чем вы напишете мне про Webpack - я уже и так его использую. Если собирать всё вебпаком, ошибки "exports is not defined" уже нет, вебпак всё резолвит.
Однако вебпак больше подходит для продакшена, когда нужно собрать всё в один готовый файл.
Во-первых, он компилирует по 5 секунд, это долго (у меня 10 строк тестового кода).
Во-вторых, если собрать всё в один файл, пропадает возможность дебага кода в браузере - нет сурсмап, да и как дебажить огромный файл, в который включены библиотеки.
В третьих, у самого вебпака есть проблемы с некоторыми библиотеками (в частности, для uikit он стирает глобальную переменную uikit, из-за чего тот перестаёт работать, и это приходится делать вручную костылями через (<any>window)["uikit"] = UIkit; - хотя это уже решённая проблема, это всё равно ещё одна причина, по которой вебпак затрудняет разработку и дебаг).

Я также знаю о target:ESNext и module:ES2015 (и прочих настройках tsconfig). Это не работает. Я прямо сейчас поставил в тсконфиге эти значения и строка с exports всё равно присутствует, ничего не меняется. Я долго гуглил решения по этому вопросу, но ничто не помогает.

Наконец, есть вариант с референсами ///<reference path="..." />, когда нужно также проставить System для module в тсконфиге. Это работает. Однако это отнимает возможность делать так:
import UIkit from "uikit";
Из-за того, как написан d.ts для uikit (взято из @types/uikit с npm), по-другому использовать его нельзя. Предполагается, что его будут импортить, а не референсить. Поэтому, хоть мне и нравятся референсы, тайпдефы чужих библиотек не позволяют мне нормально их использовать.

Я пробовал подключать core-js, а также commonjs, но и они ничего не изменили.

Может быть, есть какой-то выход, которого я не вижу? Заранее спасибо.

Comments

[Lynn «Кофеман»]

module:ES2015 работает.
Если у вас не работает, значит вы что-то не так настроили. В таком случае нужен ваш конфиг и что и как вы запускаете

[Kyubey]

Lynn «Кофеман», Вот мой конфиг:

{
  "compileOnSave": true,
  "compilerOptions": {
    "module": "ES2015",
    "newLine": "LF",
    "outDir": "./wwwroot/app/",
    "emitBOM": true,
    "target": "ESNext",
    "sourceMap": true,
    "declaration": true,
    "lib": [
      "es2015",
      "dom"
    ],
    "strict": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "forceConsistentCasingInFileNames": false,
    "strictPropertyInitialization": false,
    "esModuleInterop": true
  },
  "include": [
    "./wwwroot/app/**/*"
  ],
  "exclude": [
    ".git",
    "node_modules"
  ]
}

[Lynn «Кофеман»]

У меня работает

$ tree -I node_modules
.
├── package.json
├── package-lock.json
├── tsconfig.json
└── wwwroot
    └── app
        ├── r2
        │   ├── index.d.ts
        │   ├── index.js
        │   ├── index.js.map
        │   └── index.ts
        └── test
            ├── index.d.ts
            ├── index.js
            ├── index.js.map
            └── index.ts

4 directories, 11 files

$ cat wwwroot/app/r2/index.ts 
import Test from '../test/index';

class R2 extends Test {
}

export { R2 };

$ cat wwwroot/app/r2/index.js
import Test from '../test/index';
class R2 extends Test {
}
export { R2 };
//# sourceMappingURL=index.js.map

[Kyubey]

Lynn «Кофеман», Странно. У меня он всё равно генерирует строку

Object.defineProperty(exports, "__esModule", { value: true });

, что бы я ни делал.

Я сейчас написал класс в отдельном файле -

class Test1 {

}

export { Test1 };

и вот, что оно мне сгенерировало -

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Test1 = void 0;
var Test1 = /** @class */ (function () {
    function Test1() {
    }
    return Test1;
}());
exports.Test1 = Test1;
//# sourceMappingURL=test1.js.map

[Егор Живагин]

Честно говоря, не понял ваших причин "против вебпака", сурсмапы там добавляются одной строкой, причём можно оставить в них оригинальные файлы с ts, время сборки решается через hot module replacement (около 2-ух строк, если у вас поднимается devServer). Единственное, не очень понял про переменную, вебпак не должен ничего "срезать"

[Lynn «Кофеман»]

Kyubey, у вас явно используется не этот конфиг. Как запускаете компиляцию?

[Kyubey]

Егор Живагин, вот есть релейтед вопрос на со: https://stackoverflow.com/questions/42422885/cant-... Там предлагают использовать expose-loader вебпака, но я попробовал и он не сработал, это устаревшая информация. Про сурсмапы и прочее - вы правы. Мне просто удобней дебажить оригинальные файлы. Девсервер я не поднимаю.

[Kyubey]

Lynn «Кофеман», Я вчера догадался, в чём проблема. Я работаю в Visual Studio и почему-то, когда я добавил в проект tsconfig.json, студия не заместила им собственные настройки. По сути, обычно происходит оверрайд, потому что по умолчанию студия хранит настройки компиляции в свойствах проекта, а тут этого не произошло. Естественно, когда я это понял, я сразу же решил эту проблему. Теперь у меня генерируется ES6 или ESNext код в зависимости от того, что я указываю. Поэтому спасибо вам, я бы не разобрался, что дело именно в конфиге.

Answer 1

[Kyubey]

Дело было в неверном конфиге. См. комментарии.