http://andrewhfarmer.com/static-site-anatomy/
Менеджер пакетов
1. NPM
-------------------------
npm-хуки (например postinstall) можно применять для:
- pre-commit — проверка стиля кодирования (ESLint);
- pre-push — запуск тестов;
- post-merge — запуск
npm install и jam install.
---------------------
npm-хуки (например postinstall) можно применять для:
- pre-commit — проверка стиля кодирования (ESLint);
- pre-push — запуск тестов;
- post-merge — запуск
npm installиjam install.
---------------------
------------------------
npm - де-факто, это стандарт в мире JS,
Какой загрузчик модулей / bundling tool вы используете?
https://webpack.github.io/
-------------------------
Возможности Webpack
1) Разрешение зависимостей
2) Сборка в 1 или несколько бандлов
3) Динамическая подгрузка
4) Поддержка разных компиляторов (typescript, babel и т.д.)
5) Оптимизация
6) Тестирование
7) Статический анализ
8) Горячая перезагрузка (Hot Reload)
Hot Reload c плагином react-hot-loader для реакта позволяет менять код отдельного компонента без перезагрузки всей страницы. А вместе с Flux ты сможешь делать вещи типа прокрутки истории изменений в данных туда-обратно — одновременно с горячим редактированием кода
Возможности Webpack
1) Разрешение зависимостей
2) Сборка в 1 или несколько бандлов
3) Динамическая подгрузка
4) Поддержка разных компиляторов (typescript, babel и т.д.)
5) Оптимизация
6) Тестирование
7) Статический анализ
8) Горячая перезагрузка (Hot Reload)
Hot Reload c плагином react-hot-loader для реакта позволяет менять код отдельного компонента без перезагрузки всей страницы. А вместе с Flux ты сможешь делать вещи типа прокрутки истории изменений в данных туда-обратно — одновременно с горячим редактированием кода
Инструмент автоматизации сборки и компиляции
1. http://gulpjs.com/ - 2007 (I)
2. Npm run - 1366 (I)
3. http://gruntjs.com/ - 911 (I)
-------------------------
http://broccolijs.com/ (V)
-------------------------
В ходе подготовки выкатывания сайтов в продакшен нам обычно приходится выполнять такие задачи, как улучшение производительности с помощью минификации JavaScript и CSS, компиляцию CoffeeScript/TypeScript, модульное тестирование и т.д. Для этих целей можно порекомендовать Grunt или Gulp
Рекомендации по использованию Grunt: если вы предпочитаете писать конфигурационные файлы и вас не волнует, что исполнитель задач может генерировать промежуточные файлы.
Рекомендации по использованию Gulp: если вы предпочитаете писать код вместо конфигурирования, и были бы не против использовать Node.js-потоки для увеличения производительности.
-------------------------
В TFS2015 поддерживаются таски для gulp
-------------------------
Заключение: Gulp пользуется большей популярностью, т.к. даёт больше контроля.
-------------------------
В TFS2015 поддерживаются таски для gulp
В TFS2015 поддерживаются таски для gulp
-------------------------
Заключение: Gulp пользуется большей популярностью, т.к. даёт больше контроля.
Расширение JavaScript
Но мы не живём в идеальном мире. Разработчикам приходится поддерживать старые версии браузеров, не поддерживающих самые современные и лучшие возможности JavaScript.
Это можно сделать с помощью Babel, JS-компилятора, преобразующего последние возможности ES-стандарта в ES5. Это поможет вам запускаться даже на очень старых браузерах наподобие IE 11
-------------------------
Заключение: рекомендуется использовать babel
Но мы не живём в идеальном мире. Разработчикам приходится поддерживать старые версии браузеров, не поддерживающих самые современные и лучшие возможности JavaScript.
Это можно сделать с помощью Babel, JS-компилятора, преобразующего последние возможности ES-стандарта в ES5. Это поможет вам запускаться даже на очень старых браузерах наподобие IE 11
Это можно сделать с помощью Babel, JS-компилятора, преобразующего последние возможности ES-стандарта в ES5. Это поможет вам запускаться даже на очень старых браузерах наподобие IE 11
-------------------------
Заключение: рекомендуется использовать babel
ПОЛЕЗНЫЕ ССЫЛКИ
Npm
https://docs.npmjs.com/getting-started/what-is-npm
Webpack
https://habrahabr.ru/company/jugru/blog/342842/
https://babeljs.io/docs/learn-es2015/
GULP
GRUNT
http://designmodo.com/grunt/
Task Runner
npm Has a script attribute in its package.json that can be used to define some simple tasks. Has access to CLIs installed in dev-dependencies, so they don't need to be installed globally.
Grunt First of its kind in JavaScript land, used if the npm-scripts aren't enough anymore.
Gulp Like Grunt, but needs less configuration.
Compiler
Buble a fast ES2015 compiler, if you don't need all the fancy features of Babel.
Bundler
Browserify was created to make the synchronous CommonJS modules of Node.js available in asynchronous browser land. So it doesn't simply merge all your files, but also wrapps modules for async use.
GRUNT
http://designmodo.com/grunt/
Parcel
Parcel — сборщик, не требующий настройки за счёт использования нескольких процессорных ядер и эффективной системы кэширования. Кроме того, он работает с абстрактными синтаксическими деревьями вместо строк, как делается в Webpack. Как и Webpack, Parcel, кроме того, поддерживает материалы, не являющиеся JS-файлами, вроде изображений и файлов со стилями. Интерес сообщества смещается в сторону инструментов для сборки модулей, которые требуют как можно меньше настроек.
Rollup
Проект Rollup привлёк к себе серьёзное внимание до выпуска Webpack 2, в 2016-м, представив tree shaking — популярную функцию для избавления от неиспользуемого кода. Webpack ответил на это, включив поддержку ключевой возможности Rollup в свой второй релиз. Rollup упаковывает модули не так, как Webpack, что позволяет делать размер пакетов меньше, но, в то же время, препятствует использованию таких важных возможностей, как, например, разделение кода.
Когда React перешла на Rollup многие задались вопросом о том, почему не Webpack. Команда разработчиков Webpack отреагировала на это, порекомендовав использовать Rollup для разработки библиотек, а Webpack — для разработки приложений.
Когда React перешла на Rollup многие задались вопросом о том, почему не Webpack. Команда разработчиков Webpack отреагировала на это, порекомендовав использовать Rollup для разработки библиотек, а Webpack — для разработки приложений.
npm Has a script attribute in its package.json that can be used to define some simple tasks. Has access to CLIs installed in dev-dependencies, so they don't need to be installed globally.
Grunt First of its kind in JavaScript land, used if the npm-scripts aren't enough anymore.
Gulp Like Grunt, but needs less configuration.
Compiler
Buble a fast ES2015 compiler, if you don't need all the fancy features of Babel.
Bundler
Browserify was created to make the synchronous CommonJS modules of Node.js available in asynchronous browser land. So it doesn't simply merge all your files, but also wrapps modules for async use.
Continuous Integration
- Jenkins — 44 %;
- GitLab — 39 %;
- Travis — 26 %;
- CircleCI — 12 %;
- TeamCity — 8 %;
- Bamboo — 6 %.
We use https://travis-ci.com/for our continuous integration (CI) pipeline. S
Deployment
The last step in shipping the product to our users is deployment. We use https://www.ansible.com/tower which is a powerful automation software that enables us to deploy our builds easily.
As mentioned earlier, all our commits, upon successful build, are being uploaded to a central S3 bucket for builds. We follow semver for our releases and have commands to automatically generate release notes for the latest release. When it is time to release, we run a command to tag the latest commit and push to our code hosting environment. Travis will run the CI steps on that tagged commit and upload a tar file (such as
1.0.1.tar) with the version to our S3 bucket for builds.
On Tower, we simply have to specify the name of the
.tar we want to deploy to our hosting bucket, and Tower does the following:- Download the desired
.tarfile from our builds S3 bucket. - Extracts the contents and swap in the configuration file for specified environment.
- Upload the contents to the hosting bucket.
- Post a notification to Slack to inform about the successful deployment.
This whole process is done under 30 seconds and using Tower has made deployments and rollbacks easy. If we realize that a faulty deployment has occurred, we can simply find the previous stable tag and deploy it.
Webpack
+6.3k
2
Parcel
+5.4k
3
Rollup
+2.7k
4
Microbundle
+1.3k
5
Gulp
+841
Комментариев нет:
Отправить комментарий