Это первая статья из серии Путь к веб-приложениям.
В этом посте я создам базовую структуру проекта, используя:
- npm за предоставление небольших модулей (библиотек) JavaScript, а также базовую структуру для сборки/выполнения скриптов.
- babel для преобразования будущего синтаксиса JavaScript в версию, которую могут выполнять браузеры (или Node.js).
- Webpack 2 для объединения модулей JavaScript (например, из npm) в меньшее количество файлов для загрузки в браузер; теперь это эффективный инструмент сборки, предназначенный для оптимизации клиентского кода.
Этот пост не будет охватывать все, что могут сделать эти инструменты, но он подготовит почву для будущей работы.
Базовая настройка проекта
Мы поместим наши исходные файлы в каталог «src» («src/js» для JavaScript). Далее запускаем:
npm init
чтобы инициализировать для нас файл package.json.
Мы установим наши первоначальные инструменты разработки, а также React:
npm i -D [email protected] npm i -D babel-core babel-loader babel-preset-es2015-webpack npm i -D babel-preset-react npm i -S react react-dom
«npm i -D» — это сокращение от установки перечисленных пакетов npm и сохранения их сведений в package.json в разделе «devDependencies», что сигнализирует о том, что инструменты не используются в производственном коде. (Если бы это была библиотека, а не приложение, это означало бы, что потребляющие проекты не будут транзитивно получать зависимости разработки.) Использование «-S» вместо «-D» сохраняет зависимость времени выполнения.
Мы используем функции последней версии веб-пакета, поэтому нам нужно установить бета-версию; он мог измениться к тому времени, когда вы это читаете.
Babel нужны пресеты как в Babel 6 — иначе он ничего не транспилирует. На данный момент нам нужно транспилировать базовый синтаксис ES2015 (ES6), а также расширения React (например, JSX). Тем не менее, мы собираемся заставить Webpack управлять импортом модулей, поэтому мы будем использовать вариант webpack пресета es2015, который отключит модули ES2015 -> функция Babel CommonJS.
Самое простое приложение
Чтобы действительно иметь некоторый код для транспиляции с помощью babel и связки с помощью webpack, мы создадим точку входа на стороне клиента для веб-приложения. Позже мы сделаем это универсальным (то есть доступным для рендеринга на сервере). Мы собираемся использовать некоторые функции ES2015.
В следующем суть файл client.js использует оператор import ES2015 и улучшения JSX React.
Мы настраиваем webpack.config.js, который, начиная с Webpack 2, ожидает экспортируемую функцию, которая возвращает объект конфигурации. Обратите внимание, что у нас уже есть изрядное количество шаблонов. (Это было основано на превосходном расширенном учебнике по веб-пакету на egghead.io Кента Доддса.)
Важно отметить, что конфигурация веб-пакета устанавливает конвейер загрузки для файлов JavaScript (.js), который вызывает babel для транспиляции с использованием двух установленных нами пресетов babel.
Наконец, мы добавили скрипт npm в package.json для запуска веб-пакета после npm run build, что должно привести к следующему выводу. Мы запускаем простой файловый сервер HTTP, а затем переходим по адресу http://localhost:8080/src/index.html и должны увидеть Hello, there! в нашем браузере.
$ npm run build > [email protected] build /Users/phil/work/webappjourney > webpack --env.dev Hash: dd0c517b12b0821dfa47 Version: webpack 2.1.0-beta.13 Time: 2503ms Asset Size Chunks Chunk Names bundle.js 782 kB 0 [emitted] main + 168 hidden modules $ python -m SimpleHTTPServer 8080 Serving HTTP on 0.0.0.0 port 8080 ...
Если вы хотите проверить проект, он помечен на github.
И это базовая настройка для webpack, babel и react по состоянию на июнь 2016 года!
Продолжить чтение Часть 2.
