React, JSX, импорт ES модулей (в том числе динамический) в браузере без Webpack
Эта статья — попытка свести воедино имеющиеся на текущий момент средства и выяснить, возможно ли создавать production ready приложения на React без предварительной компиляции сборщиками типа Webpack, или по крайней мере свести такую компиляцию к минимуму.
Все описанное носит очень экспериментальный характер и я осознанно местами срезаю углы. Я ни в коем случае не рекомендую делать что-то такое на реальном продакшене.
Возможность использовать ECMAScript modules (<script type="module"/> с импортами вида import Foo from './foo'; и import('./Foo')) прямо в браузере давно не новость, это хорошо поддерживаемы функционал: https://caniuse.com/#feat=es6-module.
Но в реальности мы импортируем не только свои модули, но и библиотеки. Есть отличная статья на эту тему: https://salomvary.com/es6-modules-in-browsers.html. И другая не менее хорошая статья достойная упоминания https://github.com/stken2050/esm-bundlerless.
Среди прочих важных вещей из этих статей, эти пункты наиболее важны для создания React приложения:
- Поддержка package specifier imports (или import maps): когда мы пишем
import React from 'react'на самом деле мы должны импортировать что-то подобноеhttps://cdn.com/react/react.production.js - Поддержка UMD: React до сих пор распространяется как UMD и на данный момент авторы все еще не пришли к согласию как распространять библиотеку в виде модуля
- JSX
- Импорт CSS
Давайте пройдем по всем пунктам по очереди.
