PhpStorm и watcher Babel, как установить и настроить?

211

15 апреля 2018, 23:43

Установка

Через консоль PhpStorm выполняю установку: npm install --save-dev babel-cli, установился в корень настоящего проекта.

Настройка

В Settings > Tools > File Watchers создаю новый watcher с настройками:

Program - C:\SERVER\domains\react.loc\node_modules\.bin\babel.cmd.

Arguments (дефолное) - $FilePathRelativeToProjectRoot$ --out-dir dist --source-maps --presets env.

Output paths to refresh (дефолное) - $FilePathRelativeToProjectRoot$ --out-dir dist --source-maps --presets env.

Тестирование

Создаю test.js с простым кодом для тестирования:

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('root')
);

PhpStorm выдает ошибку - Error: Couldn't find preset "env" relative to directory "js"

Что делать?

Answer 1

Извините за небольшой оффтоп, но, возможно, вам больше подойдет create-react-app

Создать проект через него очень просто:

npm create-react-app projectName

Запустить сервер для разработки:

npm start

Билд для продакшна:

npm run build

Answer 2

Установить preset 'env':) Сам по себе babel не делает с файлом ровно ничего - он просто копирует исходный файл в -out-dir. Для того, чтобы он компилировал es2015 код в обычный javascript, необходимо установить набор плагинов и пресетов. Базовая функциональность доступна в пресете babel-preset-env - именно его вы передаете компилятору в качестве одного из аргументов (--presets env)

Устанавливается он командой npm install babel-preset-env --save-dev для работы с ReactJS еще понадобится react preset. Документацию по babel можно почитать здесь: https://babeljs.io/docs/setup/#installation (там нужно выбрать CLI). Вот тут еще описана настройка file watcher в WebStorm