В прошлой статье мы разобрали, как настроить less в gulp под Windows. В этой мы поговорим о настройке babel компилятора — транпайлера для javascript, позволяющего писать код на js в стиле ES6, под старые браузеры.
Будем считать, что вы уже выполнили пункты из предыдущей статьи, открываем папку проекта. Переходим в его корень. В моем случае в папку cd D:\_virtualenv_main & D:
.
Нам теперь необходиммо установить три модуля с npm. Начиная с 7-ой версии они имеют вид @{}/{} вместо традиционных {}-{}:
-
- @babel/core — ядро
- @babel/preset-env — его реализация для ES6 (предварительная установка)
- @babel/cli — интерфейс командной строки
Можно это сделать двумя командами npm install --save-dev @babel/core &
npm install --save-dev @babel/preset-env & npm install --save-dev @babel/cli
либо одной npm install --save-dev @babel/core @babel/preset-env @babel/cli
. После завершения установки наш package.json должен выглядеть так:
{ "name": "virtualenv_main", "version": "1.0.0", "description": "less updater", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", }, "author": "Sanshain", "license": "ISC", "devDependencies": { "@babel/preset-env": "^7.8.3", "gulp-less": "^4.0.1" }, "dependencies": { "@babel/cli": "^7.8.3", "@babel/core": "^7.8.3", "gulp": "^4.0.2" } }
Хорошо. Теперь я добавляю в «script» следующие значения после ключа «test»:
"gulp": "node \"./node_modules/gulp/bin/gulp.js\"", "build": "babel django_test/main/.static -d django_test/main/static", "watch": "babel django_test/main/.static -d django_test/main/static --no-comments -w"
Это скрипты, которые можно будет выполнять с помощью команды npm run. Например, npm run build автоматически запустит компиляцию всех файлов папки исходных данным (в моем случае `django_test/main/.static`) в папку назначения (django_test/main/static):
Что еще? В корне проекта так же рекомендуется создать файл .babelrc с указанием настроек. Пример содержимого:
{ "presets": ["@babel/preset-env"], comments : false }
Теперь значение false
для комментариев будет удалять все комментарии из кода для продакшена. Теперь писать ключ --no-comment
в скрипте не обязательно.
Нюансы:
Современный babel создает все es5 файлы с ‘use strict’ режиме, что в некоторых случаях несколько неудобно (в частности для ie9-). При чем все старые способы красивой победы над этой ситуацией (module:false, поддержка плагинов и прочее) уже выключены в последних версиях. Вероятно, можно дописать свой скрипт для автоматического удаления use script из файлов, однако это может повлечь некоторый оверхед. Поэтому лично я просто закомментировал строку, которая отвечает за добавления use strict на страницу:
Вероятно, есть и более лучшие способы это сделать, поскольку для командной разработки такой способ является неудобным. С удовольствием выслушаю в комментариях, если кто-то его нашел.
Подробнее про работу с babel-cli можно почитать здесь.
На этом все. Всем удачи. И пока.
от