Этот пост является частью серии постов для начинающих, предназначенных для людей, которые используют
готовые инструменты, шаблоны или шаблоны для React, но хотят с самого начала научиться и понимать, как создавать приложение React. .
Все публикации из этой серии:
Часть 1: Введение
Часть 2: Инициализация и первый файл
Часть 3: Использование синтаксиса ES2015
Часть 4: Применение руководства по стилю
Часть 5: Настройка сервера Express
Часть 6: Использование модуля Bundler
Часть 7 : Настройка React и лучшие практики
Часть 8: Настройка Redux
Часть 9: Настройка React Router
Часть 10: TDD и настройка Jest
Лучший синтаксис
ES2015 является значительным обновлением языка и предоставляет огромное количество полезных функций. Если вы до сих пор не привыкли к синтаксису ES2015, то позор вам.
Поддержка новых функций ES2015 постоянно увеличивается в современных браузерах и других средах, таких как Node.js, но печальная правда заключается в том, что не все новые функции поддерживаются, а поддержка одной функции может различаться в разных браузерах, но есть не отчаивайся дружище - выход есть.
Транспилер
ES2015 - это, по сути, просто синтаксический сахар, что означает, что мы можем использовать инструмент для преобразования кода, написанного в синтаксисе ES2015, в простой синтаксис ES5, который поддерживается всеми браузерами. Искомый транспайлер называется Babel.
Babel - это ниспосланный небесами волшебный инструмент, позволяющий использовать лучшую версию JavaScript сегодня. Мы собираемся использовать его для преобразования нашего кода ES2015 в обычный JavaScript.
Установите Babel в проект как зависимость:
$ npm install --save babel-core babel-cli
Babel не будет работать прямо из коробки, вам нужно будет настроить его и указать, какие функции вы хотите включить. Вы можете настроить Babel разными способами, один из них - с помощью файла .babelrc.
Создайте файл .babelrc в корневом каталоге проекта и измените его содержимое, чтобы оно соответствовало следующему:
{
"presets": [],
"plugins": []
}
Чтобы сообщить Babel о компиляции кода ES2015 в обычный ES5, мы собираемся установить пресет ES2015, а затем добавить его в список пресетов.
Еще один полезный пресет - stage-0, мы собираемся добавить его, чтобы включить новые функции, такие как Преобразование разброса остатков объекта и Динамический импорт.
$ npm install --save babel-preset-es2015 babel-preset-stage-0
Теперь давайте обновим файл .babelrc, чтобы включить оба пресета:
{
"presets": ["es2015", "stage-0"],
"plugins": []
}
Измените содержимое файла index.js и используйте код ES2015:
/**
* index.js
*/
const logSomething = options => ({
...options,
anotherOption: 'Hello!'
});
const options = logSomething({ one: '1', two: '2' });
console.log(options);
Выполните в терминале следующую команду:
$ npx babel-node index.js
Вы должны увидеть следующий результат:
{ one: ‘1’, two: ‘2’, anotherOption: ‘Hello!’ }
Если у вас есть Node.js v8.1.4 (это то, что у меня есть) или ниже и вы попытаетесь npm start сейчас, вы получите синтаксическую ошибку о неожиданном токене. Эта ошибка не возникает с Node.js v8.5.0 или новее, на самом деле вам может вообще не понадобиться использовать Babel с последней версией Node.
Учитывая, что ваша версия Node.js может быть 8.1.4 или ниже, измените сценарий «start» в файле package.json на babel-node вместо node.
{
...
"scripts": {
"start": "babel-node ./index.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
...
}
Если вы снова запустите npm start, все должно работать нормально, так что давайте продолжим.
Теперь, когда у нас есть поддержка синтаксиса ES2015 для нашей серверной части, давайте примем руководство по стилю кода, чтобы обеспечить чистую и удобную в обслуживании базу кода. Увидимся в следующей части этой серии.
Заключение
ES2015 - это настоящее и будущее, и он предоставляет огромное количество полезных функций, и вы должны изучить его, если вы еще этого не сделали.
ES2015 еще не полностью поддерживается, но поддержка увеличивается, и вы можете использовать Babel для преобразования синтаксиса ES2015 в обычный JavaScript, чтобы обеспечить кроссбраузерность.
Была ли эта статья полезной? Пожалуйста, нажмите кнопку Хлопать ниже или подписывайтесь на меня, чтобы узнать больше.
Спасибо за прочтение! Если у вас есть отзывы, оставьте комментарий ниже.
