Автор оригинала: Jani Hartikainen.
Когда вы хотите использовать ES6, с которым вы столкнулись со списком вопросов: транспортировщики, прокладки, поддержка браузера … В этой статье я дам вам подробное руководство по обеспечению того, чтобы вы начали работать с ES6, и инструкции на Как вы можете настроить рабочий процесс для использования ES6 в производстве.
Соображения до принятия решения на ES6
Прежде чем вы решите использовать ES6 в вашем приложении, есть несколько соображений. Я забочусь о спецификации ES6?
- Каковы мои целевые платформы?
- Мне нужно отладить на старые устройства или браузеры?
- Я разрабатываю критическое приложение для эффективности? Давайте обратитесь к каждому из них, прежде чем мы пойдем дальше.
Спецификация ES6 изменений
Спецификация ES6 не закончена. Способ работы определенные функции могут измениться в будущих версиях. Это означает, что инструменты, которые необходимо использовать, чтобы сделать функции ES6. Работы в текущей версии JavaScript могут также измениться и сломать существующий код. Если вы беспокоитесь о потенциальных изменениях спецификации и вашего разбивающего кода, вы должны подумать дважды, прежде чем прыгать в ES6-вагон.
Целевые платформы
Ваши целевые платформы – устройства, браузеры и т. Д. – Следует помнить при принятии решения о том, использовать ли или использовать ES6. Использование ES6 требует либо использования транспортера или прокладки. Позже мы поговорим об этом позже в статье, но если вам нужно использовать транспортер, это повлияет на как вашу способность для отладки кода и производительность кода. Если вы один из бедных людей, которые все еще должны иметь дело с IE6 или даже IE7, то вы можете застрять на использовании меньшего подмножества функций ES6.
Отладка
Если вы в конечном итоге используете транспортер, он создаст для вас скомпилированные файлы JS. Иногда этот вывод может быть трудно следовать, и это может сделать отладку трудно. К счастью, современные браузеры поддерживают исходные карты, что означает, что вам не нужно беспокоиться об этом так много. Исходная карта позволит вам увидеть исходный код ES6, а не компилированный код ES5. Однако, если вы нацеливаете некоторые старые платформы, они могут не поддерживать исходные карты. Многие более старые браузеры поддерживают ES5 просто отлично, а трантпильский код будет работать в них, но если вам нужно отладить эти браузеры, это может оказаться более сложным. Это меньше проблем, если вы используете прокладку. Кодекс в тех написан человеком, а не генерирован, и поэтому их следует легче понять.
Представление
Это также в первую очередь, связанное с транспортом. Трангилеры ES6 не делают никаких оптимизаций производительности на основе браузера, выполняющего код. В некоторых случаях это может привести к коду, которое не работает так хорошо во всех браузерах. Если вы работаете над то, что нужно иметь очень высокую производительность, например, игры, вы можете придерживаться «стандартного» JavaScript. Однако это не значит, что вы даже не должны использовать ES6 – просто избегайте использования функций ES6 в результате эффективности важных элементов вашего кода, если у вас есть проблемы с этим.
Выбор: используйте транспортер или использовать прокладку?
Если вы решите использовать ES6, вам нужно сделать выбор: какие функции ES6 вы хотите использовать? ES6 предоставляет как новый синтаксис, такой как Пусть Или модульная система, но также предоставляет новые объекты и функции на существующих объектах. Если вы хотите использовать новый синтаксис, вам нужен транспортер. Если вы хотите использовать только дополнительные объекты и функции, такие как обещания, новые строки или математические функции или такие, тогда вы можете использовать прокладку. Шимс проще и проще работать, как вам нужно только включить его в свою страницу или приложение узла перед другими сценариями. Однако Shim не может поддерживать синтаксические особенности. Если вы хотите тем, вам нужен транспортер.
Настройка ES6 Chim
Если вы хотите использовать только новые объекты и функции, вы можете использовать Shim. Если вы хотите новый синтаксис, пропустите Настройка Traceur -Part Отказ Для этого мы будем использовать ES6 Шим Отказ
ES6 Chim в Nodejs
Установка прокладки в узле очень прост: запустить NPM Установите ES6-Shim, включите требуют ('ES6-Shim'); в ваших узлах-скриптах.
ES6 Chim в браузере
ES6 CHIM имеет достаточно широкую поддержку браузера, даже вплоть до Internet Explorer 8. Простейший способ начать работу в браузере просто включает в себя бирку сценариев на вашей странице:
Вы можете скачать файл из Страница ES6 Shim Github Отказ Вы также можете установить его, используя один из альтернативных подходов, перечисленных на той же странице.
Используя прокладку
Просто убедитесь, что файл Chim загружается перед любыми сценариями, которые зависят от функций ES6. Использование производства не требует изменений.
Настройка трансполютора Traceur
Есть два способа использования Traceur:
- Включите компилятор Traceur на вашей странице/узле
- Предварительно скомпилируйте код на сервере
Первый вариант хорош для быстрого тестирования вещей, но он поставляется с ударом производительности. Код JS скомпилирован на лету на странице, поэтому она не так быстро, как работает предварительно скомпилированный код. Если вы планируете запустить код ES6 в браузере, я рекомендую использовать подход № 2, но № 1 в порядке с Nodejs.
Рабочий процесс Traceur с Nodejs
В узле наземных вещей достаточно просты. Во-первых, нам нужен модуль транспортера Traceur: NPM Установка –save Traceur у нас есть два типичных сценария для использования ES6:
- Загрузите все приложение, используя модули ES6, типичный случай с новыми приложениями
- Смешать и сопоставить узловые модули и модули ES6, типичный случай с существующими приложениями
- ПРЕДУПРЕЖДЕНИЕ. Вместо Traceur вы можете испытать соблазн использовать флаги Узела –harmony *. Это экспериментальные особенности и не рекомендуются.
Загрузить все приложение в качестве ES6
Если ваше приложение написано в основном в ES6, вы, вероятно, захотите использовать этот метод. Вы все еще можете использовать собственный узел требуется Загрузка с этим при необходимости! То, как работает этот метод, вы пишете точку записи для вашего приложения в качестве обычного модуля узла. В этой точке записи вы загружаете файл ES6, который загрузит ваше приложение. Во-первых, давайте создадим файл Bootstrap:
//bootstrap.js
export function run() {
console.log('Hi there');
}
Далее создайте файл точек входа. Это то, что мы будем работать с помощью Узел :
//app.js
var traceur = require('traceur');
traceur.require.makeDefault(function(file) {
return file.indexOf('node_modules') == -1;
});
require('./bootstrap').run();
Теперь мы можем запустить вышеуказанный код с помощью узла: Node App.js.
Вторая строка кода делает TraceR’s требуется переопределить собственное узел. Мы используем простую проверку на пути к файлу, чтобы убедиться, что мы не запустим никаких файлов в Node_Modules через TraceR, так как он не будет служить целями. Красивая часть об этом заключается в том, что Traceur становится по существу прозрачным: мы можем использовать модули узлов в модулях ES6, мы можем использовать требуемые и т. Д.
Используя узловые модули в пределах ES6
Мы можем использовать либо требуемый или ES6 модуль импорта синтаксиса для этого. Например, использование требуется:
//bootstrap.js
var express = require('express');
export function run() {
console.log('Hi there');
var app = express();
}
Или, используя импорт модуля ES6:
//bootstrap.js
import * as express from 'express';
export function run() {
console.log('Hi there');
var app = express();
}
Смешивание и сопоставление узлов модулей и модулей ES6
Этот подход можно использовать, если у вас есть существующее приложение, где вы хотите начать использовать модули ES6. С помощью этого подхода мы просто включаем Traceur In в нашем модуле, и используйте функцию требуют от нее напрямую:
var traceur = require('traceur');
var example = traceur.require('./example.js');
//example.js is an ES6 module, we can use it from here as we'd normally use it:
example.whatever();
Рабочий процесс Traceur для браузеров
Конечно, в браузере на землю жизнь не так просто. Нам нужно установить TraceR в качестве инструмента командной строки и нужен другой файл из него.
Настраивать
Сначала установите инструмент: NPM Установите -G Traceur Теперь вы можете запустить его с помощью Traceur из командной строки. Нам также понадобится файл Traceur-Runtime.js. После установки Traceur вы можете найти его в каталоге NPM. Это обычно расположено в/usr/local/lib/node_modules/traceur/bin/traceur-runtime.js. Скопируйте файл, чтобы вы могли включить его на страницу HTML. Если вы не можете найти файл, вы можете установить TraceR в локальные Node_Modules, используя NPM Установить TraceR. Затем файл будет в текущем DIR, под Node_Modules/Traceur/Bin/Traceur-Runtime.js
Настройка модуля ES6 на веб-странице
Предположим, что простая структура проекта, где файлы исходного кода размещаются в SRC/, а выход сборки будет в сборке/. Предполагается, что файл Traceur-Runtime должен быть в Fib/traceur-runtime.js сначала, мы создадим простой пример файла:
//src/app.js
export function run() {
console.log('Hi there');
}
Далее мы можем использовать TraceR для преобразования его в ES5: Traceur –out Build/Bundle.js src/app.js, используя флаг –out, мы говорим Traceur, чтобы объединить все зависимости нашего сценария App.js в bundle.js файл. Наконец, HTML:
Нам нужно включить время выполнения и наш пакет. Затем мы используем модуль System Module ES6, чтобы получить доступ к модулю, и вызовите Беги Функция, которую мы экспортировали в нее.
Использование импорта и других библиотек
Если вы строите несколько модулей ES6, используя их с помощью этой настройки просто:
//src/app.js
import * as foo from 'foo';
export function run() {
console.log('Hi there');
}
Вы можете импортировать любые модули ES6 как обычно. Traceur справится с зависимостями и автоматически связывает их в выходной файл. Используя другие библиотеки, такие как jQuery, работает точно так же, как он не использует ES6:
//src/app.js
export function run() {
$(() => {
$(document.body).html('hello world');
});
}
Вы просто включаете любые библиотеки, которые вы хотите перед вашими сценариями, а глобалы, которые они предоставляют, будут доступны в модулях ES6.
Исходные карты
Наконец, давайте посмотрим, как получить исходные карты, чтобы облегчить отладку.
Исходные карты для узла
Чтобы включить исходные карты с узлом, NPM установить –save Traceur-Source-maps и включить его в свой скрипт:
var traceur = require('traceur');
require('traceur-source-maps').install(traceur);
Исходные карты для браузеров
В случае браузеров нам просто нужно немного настроить параметры команд Traceur: Traceur – Asource-Maps –out Build/Bundle.js src/app.js
В заключение
С правильными инструментами мы можем воспользоваться преимуществами функций, доступных в будущих версиях JavaScript сегодня. Как обычно, он не приходит без его возможных недостатков, но часто они не актуальны в зависимости от вашего использования. Если вы хотите узнать больше о том, как ES6 может улучшить ваш JavaScript, я также написал о Практические преимущества функций ES6 Отказ Окончательный вопрос остается: когда вы можете перестать использовать прокладки и трапер? Это довольно сложно ответить, но, скорее всего, будет несколько лет. Вы можете использовать полезные kangax Столы совместимости ES6 Чтобы проверить наличие определенных функций, некоторые из которых уже поддерживаются более чем одним браузером.