Это статья, продолжающая React.js с Flask и немного AMD, в которой исследуется новый выпуск React (0.14), а также webpack для управления всеми активами. Каждый день в NPM доступно все больше и больше библиотек JavaScript. R (equire) .js и AMD покажутся утомительными, если вы попробуете CommonJS (через Webpack или Browserify). Bootstrap недавно отошел от LESS, чтобы принять SASS, поэтому мы также включим некоторые SASS бесплатно.

Поскольку мы современные разработчики Python, наше веб-приложение будет пакетом Python, который определяется в файле setup.py.

Наше приложение будет максимально минимальным, но при этом будет включать в себя некоторые из доступных современных инструментов. Рекомендуется поместить код в каталог, названный так же, как ваш модуль. Итак, у нас будет demo / __ init__.py.

Этот файл делает сразу многое, давайте объясним каждую его частичку.

  • __version__ вычисляется из имени пакета, чтобы избежать дублирования.
  • отладка считывается из переменных среды, это лучшая практика для 12-факторного приложения.
  • затем мы запускаем webpack с файлом manifest.json. Этот файл содержит отображение между ресурсом JavaScript или CSS в нашем случае и его URI. Эти файлы можно кэшировать навсегда, как рекомендует YSlow!.
  • два маршрута, один для нашей индексной страницы, а другой для ресурсов. Конечно, ресурсы должны обслуживаться веб-сервером (например, с использованием nginx try_files).
  • и веб-сервер по умолчанию для режима разработки.

Давайте погрузимся в файл demo / templates / index.html:

Этот файл использует Jinja2 и определяет два ресурса: main_css и app_js. Ради этого, оба они взяты из React.js и таблицы стилей SASS, которые будут обрабатываться веб-пакетом для нас. Во-первых, чтобы не создавать те ресурсы CSS и JavaScript, которые нам нужны. Таблица стилей SASS: assets / styles / main.scss:

И скрипт React.js assets / scripts / app.js:

Раньше нам приходилось переводить этот псевдо-JavaScript (вызываемый в JSX) в ES5 с помощью инструмента под названием JSXTranformer. ES2015 (он же ES6) набирает обороты. Babel переводит современный JavaScript в версию, понятную современным браузерам. Как нам поместить эти два экзотических файла в наши ранее определенные main_css и app_js? Заходит в Webpack со своим конфигурационным файлом webpack.config.js:

Это самый большой кусок, который вам придется сегодня переварить.

  • он определяет две записи, наши main_css и app_js. Как удивительно?
  • затем, где заканчивается этот файл, здесь: demo / public.
  • в разделе модулей настраивается загрузка файлов javascript с помощью babel-loader и файлов SASS с помощью sass-loader.
  • наконец, он активирует некоторые плагины для создания файла manifest.json и создания минимизированных версий.

Бинарная программа webpack прочитает этот файл и сгенерирует все для нас. Когда статические активы сгенерированы, мы почти закончили. Если вы запустите python demo / __ init__.py, он будет работать. Но если вы установите его с помощью pip, этого не произойдет. Потому что по умолчанию pip не включает все остальные файлы. Для этого нам понадобится файл MANIFEST.in:

Отлично, давайте представим, что мы находимся на нашем рабочем сервере. Приложение будет установлено через pip и запускаться с использованием gunicorn (или µWSGI, Chausette и т. Д.):

Вот и все, ребята! Вы создали, установили и запустили веб-приложение, которое определено в пакете Python.

Следующие шаги могут заключаться в следующем:

  • настроить NGinx в качестве обратного прокси-сервера и позволить ему обслуживать общедоступный каталог.
  • запустите webpack с помощью специальной команды setup.py.
  • подключиться к базе данных и выполнить миграцию через алембик.
  • ???
  • выгода!