Проект Babelify с машинописью и кармой - PullRequest
Новая
       48

Проект Babelify с машинописью и кармой

0 голосов
/ 08 мая 2018

Настройка и цель

Проект машинописного текста, с тестами машинописи Мокко. Проект должен быть перенесен из Typescript в ES6, а затем преобразован через Babel для нескольких отправляемых комплектов.

Я бы хотел запустить все тесты в браузере с помощью Karma (и в конечном итоге BrowserStack ) для той же преобразованной версии, что и Babel.

Попытки и проблемы

У меня работает karma-typcript + mocha, но только в браузерах, совместимых с es2017. Проблема заключается в том, чтобы подключить Babel между ними.
Я думаю, что перепробовал все, что мог себе представить, а именно:

  • karma-typcript-es6-transform : преобразует только связанные модули ES6, а не код пользователя.
  • karma-browserify вместе с babelify transform: browserify кажется несовместимым с машинописью кармы или, по крайней мере, ее системой преобразования. Сбой, когда babel не может найти файл some/some.js, который, кажется, существует только в памяти кармы.
  • karma-babel-препроцессор кажется правильным способом сделать это.

Также многочисленные варианты всего вышеперечисленного и многое другое, ни один из которых не работал.

Многообещающая настройка с karma-babel-preprocessor

Я думаю, что это должен быть правильный способ сделать это, поэтому я опубликовал проект с моим текущим состоянием вещей: https://github.com/anpur/karma-typescript-babelify.

Вот часть моего karma.conf.js: 

frameworks: ['mocha', 'karma-typescript'],

preprocessors: {
  'src/*.ts': ['karma-typescript', 'babel'],
},

babelPreprocessor: {
  options: {
    presets: [
      [ 'es2015' ]
    ]
  }
},

karmaTypescriptConfig: {
    compilerOptions: {
      sourceMap: true,
      target: 'es6'
    },
    bundlerOptions: {
      addNodeGlobals: true,
      sourceMap: true
    },
    tsconfig: './tsconfig.json'
},

Карма может переносить -> преобразовывать -> связывать это в этой настройке, но у меня есть целый ряд различных странных проблем (ни один браузер не работает в этом состоянии):

  • В браузерах es2017 (Chrome): Uncaught Error: Can't find entrypoint для some-test.ts (mocha отлично работает без преобразования babel).
  • В старом Firefox 44 TypeError: global is undefined.
  • в IE 10 Unable to get property 'wrappers' of undefined or null reference.

P.S. - Ни один из вышеупомянутых модулей / фреймворков не важен для меня, поэтому я буду доволен любой другой рабочей установкой, которая может выполнять машинописное тестирование -> babel -> тестирование стека браузера. Спасибо!

Ответы [ 2 ]

0 голосов
/ 11 мая 2019

Я обнаружил альтернативный способ с веб-пакетом. Итак, карма -> вебпак -> бабел.

Вот демо-проект . Если вы пытаетесь перенести реальный проект, он будет иметь тесты. Этот проект также решает проблемы с запуском тестов DOM.

0 голосов
/ 10 мая 2018

Я имел в виду тестирование с использованием компилятора Babel 7, который сам поддерживает компиляцию TypeScript, установленного из более ранней версии Babel 6.

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

Испытание, похоже, прошло сейчас, как и ожидалось, ура! вот запрос на получение тяги

  • Изменен на @babel/core:^7.0.0 -компилятор
  • Изменены предварительные настройки для Babel, чтобы они соответствовали версии Babel 7
  • Используется babel-core": "^7.0.0-bridge.0 -разрешение для избежания проблемы, когда - - модули ссылаются на более старую версию babel
  • Дали некоторые дополнительные .tsconfig опции
  • Некоторые незначительные изменения в karma.conf

EDIT:

Я действительно считаю, что вы можете просто удалить Babel Loader из строки сборки и просто указать параметр karma-typescript -loader для цели es5.

es5 уже некоторое время поддерживается основными браузерами и также должна работать в FF 44. Классы также были введены в es6, и поэтому у вас были проблемы с классами раньше, компиляция в es5 преобразовывает классы в функции. 

karmaTypescriptConfig: {
  compilerOptions: {
    sourceMap: true,
    target: 'es5' // <-- this here
...