Comments 45
Мы потеряем юнит тесты
Не потеряете.
скорость
Не потеряете. Или для вас будет открытием то, что минифицировать и оптимизировать тоже можно без бандлера?
да и как быть с импортом компонентов
Не надо с ними «быть», во всех уважающих себя браузерах импорты уже работают нативно. Ну и еще немного можно эту работу расширить через вот это.
да и вообще спагетти код какой-то получится…
Подождите, вы серьезно считаете модульный код с импортами и экспортами «спагетти»? А монолитную функцию на 50 000 строк — я так полагаю, нет?
Вместо babel можно взять buble, он будет поменьше весить, чем babel-standalone.
Не потеряете. Или для вас будет открытием то, что минифицировать и оптимизировать тоже можно без бандлера?
Без бандлера — можно, а вот без этапа сборки вообще — не получится.
Вместо JSX можно использовать template strings при помощи пакета htm:
import htm from 'https://unpkg.com/htm?module'
const html = htm.bind(React.createElement);
function Component({name}) {
return html`
<div>${name}</div>
`;
}
Размер скачиваемых браузером файлов: 542 Kb, время: 589 ms
Вы считаете это нормальным для вывода 3 слов в теге h1?
Для каких задач?
И вот тут как раз возможность юзать vue без бандлера решает. Плюс когда до этой части проекта дойдет процесс переписывания — функционал уже будет готов, его достаточно будет вставить в новую SPA.
шаблоны удобно писать в теге скрипт:
<sc*ript type="text/x-template" id="product-options">....</scr*ipt>
Vue.component('product-options', {
template: '#product-options'
}
Через unpkg.com можно подключить любой npm-пакет (если он опубликован в основном репозитории, конечно же).
Не получится. Т.к. импорты надо переписывать. https://habr.com/ru/post/474672/ я поступил так.
Там же есть экспериментальная фича ?module, которая переписывает все статические импорты чтобы те работали. Обратите внимание, что она тут и используется...
Да, но допустим он размотает import Foo from 'foo' в const Foo = window.Foo или как он там это делает, но файл то кто будет грузить? Я руками? В index.html все все все прописывать? А что если это зависимость зависимости и тд?
Насколько я понял, он размотает import Foo from 'foo' во что-то вроде import Foo from 'foo@1.2.3?module'. А грузить это будет браузер.
Так а скрипт то сам как будет грузиться? Он какой то добавочный код подсунет чтоб тег script приземлить на страницу? По-моему он дальше чем текстовая замена не идет и в рантайме ничего не делает особого.
Зачем добавочный код и тэг script? Какую проблему вы сейчас пытаетесь решить?
Физически код зависимости как попадет на страницу? Вот вы например запросили пакет с A, прописали его:
<script type="application/javascript" src="https://unpkg.com/a@1.0.0/a.production.min.js"></script>
А он в свою очередь потянет еще что-то. Не все ж пакеты как реакт несут в себе полную сборку, некоторые еще что-то требуют. И далее по цепочке. Как это разруливать?
Браузер увидит конструкцию "import ..." и загрузит зависимости. Зачем тут ещё какой-то дополнительный код и динамически формируемый тэг script?
wipe я был не прав, Unpkg все перепишет https://unpkg.com/next-redux-wrapper@4.0.1/es6/index.js?module, но реакт распространяется как UMD, он несовместим с import=module: https://unpkg.com/react@16.12.0?module и привет… следовательно любой другой пакет потенциально может так отпасть, следовательно нет никакой уверенности (((
Вы читали статью мою, которую я выше кинул? Там все это описано.
Статью спасает что топ левел реакт как скрипт прописан...
Вы вообще читаете что вам пишут?
Во-первых, да, в режиме ?module unpkg именно что перепишет все зависимости так, чтобы они смогли нормально загрузиться.
Во-вторых, UMD — это формат самодостаточного бандла, готового к подключению на страницу тэгом script
Да, читаю, я отредактировал коммент, вы правы, а я нет (по части переписывания путей)
Во-вторых, UMD — это формат самодостаточного бандла, готового к подключению на страницу тэгом script
Это не так. UMD — обертка, она может иметь прописанные package identifiers и обращения к global scope в качестве фоллбэка.
UMD не равно bundle со всеми зависимостями. Реакт же не отрезолвился вообще https://unpkg.com/react@16.12.0?module (ссылка сгенеренная Unpkg). А Вы читаете, что вам пишут? )))
Реакт не отрезолвился потому что он поставляется в формате UMD, а не es6 module
Но у него и импортов-то нет
Я и говорю, повезло. А может и не повезти. Я регулярно встречаю странные поставки без ES6 и в UMD без бандла...
Еще интересно, а что будет, если я импортну библиотеку, которая импортнет реакт, думаю все сломается, т.к. не видно кода, который бы догадался, что реакт уже есть на топ левеле, и модуль можно не грузить. Иначе сломается точно, т.к. реакт не резолвится.
Добавили для реакта преобразователь — сразу реакт почемуто стал удобнее.
Давайте для Vue тоже подгрузим такой же конвертер? Тоже станет удобнее, тогда можно будет более легкую версию фреймворка грузить, без компилятора шаблонов.
Учитывая, что кроме отрисовки компонентов и значений переменных в реакте больше ничего нет и надо грузить кучу библиотек(как ранее в коментах предложили, «для удобства»), это тоже не имеет значения?
А как насчет использования библиотек? ;)
Я дальше пошел и преобразования в воркер засунул: https://habr.com/ru/post/474672/
Кажется, вы боретесь с проблемой, которой нет. Собрать бандл на любом фреймворке (React, Preact, Vue, Svelte) и интегрировать его в любой сайт нет никакой сложности.
На реакте вполне можно писать без JSX, и не нужно будет тащить babel в рантайм.
Рекомендую приглядется к Svelte, он для написание разных виджетов и частей страниц очень неплохо подходит (за счет почти отсутствия рантайма)
React и Vue без npm и сборки