Почему перенос TypeScript к цели: ES5, Module: Common JS вызывает ошибки в браузере? - PullRequest
Новая
       18

Почему перенос TypeScript к цели: ES5, Module: Common JS вызывает ошибки в браузере?

2 голосов
/ 14 февраля 2020

Я работаю с TypeScript и модулями, чтобы тестировать с Jest. Я могу нормально пройти тесты в Jest, но трансплантированный JavaScript не запускается в браузере. Я получаю сообщение об ошибке: 

Uncaught ReferenceError: exports is not defined at scripts.js:2

Транспортированный JavaScript: 

"use strict";
Object.defineProperty(exports, "__esModule", { value: true }); // this is the offending line
var root = document.documentElement;
exports.root = root;
var button = document.querySelector('button');
if (button) {
    button.addEventListener('click', handleClick);
}
function handleClick() {
    if (root)
        console.log(root.style.backgroundColor);
    var color = '#000000'.replace(/0/g, function () {
        return Math.floor(Math.random() * 16).toString(16);
    });
    if (root) {
        root.style.setProperty('--bg-color', color);
    }
}
exports.handleClick = handleClick;
var sum = function (a, b) {
    return a + b;
};
exports.sum = sum;

Поскольку TypeScript заявляет, что он "компилируется в чистый, простой JavaScript код, который выполняется в любом браузере , в Node.js или в любом JavaScript движке, который поддерживает ECMAScript 3 (или новее): «Я ожидаю, что это будет работать в Chrome.

Мой tsconfig. json: 

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "allowJs": true,
    "outDir": "./lib",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true
  }
}

Я намеренно стараюсь держать все как можно более чистым, потому что я пытаюсь изучить некоторые конкретные c вещи о тестировании, настройке среды и узле. Возможно, я стал слишком минималистичным.

Если я изменю модуль на ES2015, то переданный код работает. Я неправильно использую Common JS? Это предназначено только для запуска на сервере?

Заранее спасибо.

1 Ответ

0 голосов
/ 14 февраля 2020

Библиотеки ES5 & ES6 & DOM должны быть включены в ваш сборник. Чтобы добавить эти библиотеки, добавьте свойство lib в tsconfig. json

{
   "compilerOptions": {
     ...
     "lib": ["es5", "es6", "dom"],
     ...
   }
}
...