Смешивание модулей typescript и javascript при запуске тестов Mocha
тлдр; Я хочу преобразовать свой JS-проект в TS по одному файлу за раз, имея возможность запускать тесты Mocha без этапа сборки.
Я использую много преобразований Babel (реквизиты классов, jsx, ...) в моем текущем коде javascript, который Mocha обрабатывает во время выполнения, регистрируя загрузчик babel (в основном mocha --require @babel/register). Это означает, что запуск одного теста выполняется быстро и не требует этапа сборки для всего проекта.
Я подписался на руководство по началу работы с TypeScript с использованием (относительно) нового плагина babel от Microsoft: @babel/preset-typescript. Это отлично сработало для основного случая: преобразование app.js в app.ts.
Чего он не охватил, так это того, как сделать пошаговый переход. Для меня исправление 3978 ошибок машинописи (фактическое количество после выполнения <code>find</code> ...) немного утомительно и затормозит разработку на две недели. На то, чтобы моя библиотека из 200 LOC helpers скомпилировалась с определениями из react-redux, ушло больше часа.
В то время как выполнение git mv app.{j,t}s работало нормально, выполнение этого для любого другого файла было катастрофой. Существующие тесты Mocha быстро вылетали из-за невозможности найти нужные файлы даже при регистрации Babel и добавлении подходящих расширений:
mocha --extension js,jsx,ts,tsx --require @babel/register
Обычно, если я делаю git mv Logger.{j,t}s, я получаю Error: Cannot find module './lib/logging/Logger'.
Есть ли способ заставить загрузчик модулей Mocha распознавать файлы машинописного текста и прозрачно запускать их через Babel?
Хм... Думаю, это выполнимо. Подскажите как это настроить? Думаю, мне понадобится папка build, которая скопирует все модули js и перенесет все модули ts во что-то, что может быть загружено Mocha.
я предполагаю, что вы используете npm или пряжу, вы можете просто добавить их в часть скриптов вашего package.json, вы можете сделать это по каталогу или по расширению файла, например --extension js, jsx, а затем использовать прекомпилятор для ts и tsx . Конечно, webpack предоставляет для этого множество простых настроек, которые могут облегчить вашу жизнь, если вы начнете их использовать.
Ответы 1
Вот как я заставил это работать в нашей смешанной кодовой базе франкенштейна javascript/typescript. mocha просто транспилирует код перед выполнением наших тестов. Это позволяет сделать все за один шаг, а не за два отдельных шага. Это мой конфиг ниже. Вы можете заменить параметры мокко, просто добавив их в качестве флагов cli.
// .mocharc.js
module.exports = {
diff: true,
extension: ['ts', 'tsx', 'js'], // include extensions
opts: './mocha.opts', // point to you mocha options file. the rest is whatever.
package: './package.json',
reporter: 'spec',
slow: 75,
timeout: 2000,
ui: 'bdd'
};
// mocha.opts
--require ts-node/register/transpile-only // This will transpile your code first without type checking it. We have type checking as a separate step.
// ...rest of your options.
// package.json
{
"scripts": {
"test": "mocha"
}
}
обновление: включая соответствующие параметры tsconfig для преобразованного проекта реакции:
{
"compilerOptions": {
"noEmit": true, // This is set to true because we are only using tsc as a typechecker - not as a compiler.
"module": "commonjs",
"moduleResolution": "node",
"lib": ["dom", "es2015", "es2017"],
"jsx": "react", // uses typescript to transpile jsx to js
"target": "es5", // specify ECMAScript target version
"allowJs": true, // allows a partial TypeScript and JavaScript codebase
"checkJs": true, // checks types in .js files (https://github.com/microsoft/TypeScript/wiki/Type-Checking-JavaScript-Files)
"allowSyntheticDefaultImports": true,
"resolveJsonModule": true,
"esModuleInterop": true,
},
"include": [
"./src/**/*.ts",
"./src/**/*.tsx",
"./src/pages/editor/variations/**/*" // type-checks all js files as well not just .ts extension
]
}
Это действительно кажется очень многообещающе, но это по сути такой же, как моя конфигурация Babel (которая также не выполняла никаких реальных проверок типов, только поверхностную транспиляцию). Действительно ли этап пересылки приводит к выводу перенесенных файлов javascript или это скорее временная вещь? Я бы хотел, чтобы у меня не было папки dist или необходимости git clean -fd каждый раз. P.S. mocha.opts устарел, и .mocharc.js делает все, что делает. Таким образом, вы можете просто удалить файл mocha.opts и встроить вызовы require в конфигурацию как поле require: ['ts-node/register/transpile-only'].
Я дам вам ответ, как только у меня будет время, чтобы проверить это и убедиться, что я могу заставить его работать так, как я надеюсь, что он работает :-) P.S. Я только что понял, что вы были это Cam из Twitter :D Спасибо, что ответили мне с некоторым реальным кодом!
У меня ушло много времени, чтобы заставить это работать, так как JSX приведет к сбою, но оказалось, что конфигурация TS была настроена так, чтобы не касаться JSX, поэтому мне пришлось создать новый tsconfig только для тестов, которые расширили мой стандартный tsconfig и в основном установили jsx: "react".
Ах да, мой файл tsconfig для работы с реакцией сам по себе является целым. Я отредактирую и включу то, что, по моему мнению, является соответствующими параметрами компилятора. Чтобы получить тесты, линтинг и компиляцию для работы с большим реактивным проектом, который изначально не был настроен в TS, нужно много прыгать. Это целая отдельная история.
Вам всегда будет нужен шаг компиляции для файлов ts, однако у вас может быть два отдельных сценария: один для файлов ts / tsx, которые вы компилируете, а другой для файлов js и связываете их, а затем просто запускаете
mocha --extension js,jsxвместо того, чтобы включать и передавать tsx в реестр babel.