Почему-то в посте про JS Fatigue многие подумали, что главная проблема — вебпак. Но на самом деле это единственный инструмент, с которым у меня не возникло проблем. Ну, давайте по порядку.
Одна из наших болей — разные подходы к компиляции TS в библиотеках. Где-то был голый tsc, где-то gulp-typescript, а где-то rollup. Таким зоопарком тяжело управлять, а надстройки над TS, бывают, ведут себя странно: переопределяют опции из tsconfig или просто игнорируют их. Т.к. от тайпчека в принципе не избавиться и он всегда будет ботлнеком, то почему бы и не компилировать файлы самим тайпскриптом? Сказано — сделано. Выкинули gulp-typescript и rollup, используем нативный tsc.
Так же по пути хотелось привести библиотеки к единому стандарту и желательно поновее. Да, я об ESM. И хотя проблем хватает, это всё таки будущее. Ну, или настоящее.
И вот тут началось веселье! Чтобы получить самый-самый современный результат, мы используем следующий конфиг:
{
"compilerOptions": {
"target": "esnext",
"module": "NodeNext",
"moduleResolution": "NodeNext"
}
}В таком режиме тайпскрипт заставит указывать расширение файлов и index.
Было:
import file from './file'
import index from ‘./directory’Стало:
import file from './file.js'
import index from './directory/index.js'Но погодите, мы же про тайпскрипт, а тут
.js какие-то! Хе-хе-хе.В каком-то ишью (увы, не смог найти) один из мэйнтэйнеров писал что-то вроде «TS doesn’t change code you wrote». Получается, нужно писать такой импорт, который заработает в ноде без каких-либо трансформаций. Кстати, утверждение, на мой взгляд, странное, т.к. ну, как-бы меняет… А из-за такой идеологии появляются странные штуки типа paths, которые без бандлера имеют мало смысла, а TS мог бы заменять импорты сам. Это было бы удобней.
Но самое смешное, что из-за этого изменения пришлось адпатироваться и бандлерам! Была парочка ишью на тему переопредления импортов, "module": "node16" should support extension rewriting и allow voluntary .ts suffix for import paths, но в случае вебпака всё закончилось появлением опции resolve.extensionAlias, которая позволяет указывать алиасы для расширений. Сразу видно, люди подумали об экосистеме.
Ну а теперь самое смешное! Вчера вышла TypeScript 5.0 Beta в котором появился --moduleResolution bundler — возможность использовать и directory index и не писать расширения!
А теперь ещё смешнее (хотя казалось бы куда уж): угадайте кто ручками ползал по репозиторию и добавлял index.js и .js ко всем импортам в 1500 файлах? Изначально задачка казалось очень простой, но внезапно закопался, а потом ещё и конлфикты решать приходилось несколько раз.
Ретроспективно становится понятно, что я выбрал плохую стратегию с добавление расширений через regex find & replace, т.к. смотря на импорт, невозможно понять нужем ему index.js или нет. Нужно было поискать кодмод для jscodeshift или написать самому. Сэкономил бы и время, и нервы, и конфликты не пришлось бы решать несколько раз. Что ж, будем знать. Если найдете кодмод — скиньте в комменты пожалуйста.
Ну и загляните в пул-реквест, там хорошо структурированы мысли.
P.S. Зато результат порадовал — срезали 12% бандла и 21% на initial loading благодаря три-шейкингу!