Ecmascript 6 — Babeljs + Gulp + function () {yield}


Содержание

Gulp babel, экспорт не определен

34 TheWebs [2015-10-23 07:06:00]

Рассмотрим следующий пример кода (и, возможно, я делаю это неправильно?)

У меня есть следующая задача:

Когда я запускаю это, я получаю следующее:

Для удовольствия, я хотел запустить его в консоли, да, я знаю, что он ничего не делает, но я не ожидал увидеть это:

выдает ту же ошибку. Идеи?

javascript ecmascript-6 ecmascript-5 babeljs gulp

1 ответ

37 Решение Tiago Garcia [2015-10-23 07:18:00]

На самом деле это не проблема с babel, вы просто пытаетесь запустить код CommonJS (переведенный из ES6 export ) в браузере без подготовки. CommonJS не запускается в браузере, вам нужно использовать инструмент для его упаковки для браузера, например Webpack или Browserify.

Просто по совпадению на этой неделе я создал небольшой проект на Github, который показывает установку кода Gulp + ES6 (с помощью export ) + Babel + Webpack: gulp-es6-webpack-example.

В моем примере вы можете загрузить JS-код в браузере либо синхронно (предварительно загружен), либо асинхронно (lazy-load).

Using gulp with Babel

Babel is a JavaScript compiler which can be used to transpile ECMAScript 6, the next version of JavaScript adding some additional features and syntax, into ECMAScript 5, meaning that you can use JavaScript features currently not supported in some engines—for example, classes and fat arrow functions—in those engines. In this article, I’ll be explaining how you can use Babel with gulp.

«Using Babel with gulp» could mean one of two things: either using Babel to write your gulpfile using ES6 syntax, or using gulp to run babel to turn your website’s JavaScript using ECMAScript 6 into JavaScript a browser will understand. I will explain both!

# Using ECMAScript 6 to write your gulpfile

Gulp 3.9 added support for transpilers such as Babel so that you can use ES6 when writing your gulpfile—for example, to be able to use fat arrow functions when using Node 0.12. First, you need to install the babel package using npm in the project gulp is installed into. Then, you need to name your gulpfile gulpfile.babel.js , which tells gulp to look for babel.

Set up the es2015 preset (as of Babel 6.0, there are no plugins included by default) in .babelrc after installing it using npm install babel-preset-es2015 :

(these instructions are taken from the Babel website)

Then, you can use ES6 in your gulpfile. For example:

That was simple. You can then call gulp normally and it will run as expected.

If you want to specify options to babel, it’s best to use .babelrc . Failing that (for example, if you want to specify a function as one of the options), you can’t use the method I just outlined. Instead, create a file called gulpfile.js containing the following:

Then use gulpfile.babel.js as highlighted above.

# Building ES6 files using Gulp

To just compile ES6 into ES5 with babel is pretty simple. Use the gulp-babel plugin as follows:


The output will be the babelified code which will work in browsers that don’t yet support all the features of ES6. Once the gulp-babel plugin has been called, you can call plugins like uglify as you normally would with gulp.

The gulp-babel plugin supports gulp-sourcemaps for easy browser debugging.

Pretty much the only feature this approach doesn’t enable is ES6 modules. For that, I recommend using browserify in addition to gulp and babel.

# Calling Babel in gulp with Browserify

(it took me a while to look up the correct casing for all those library names)

If you want to use ES6 modules, which give you the ability to import other files from your project, you can use Browserify with babel to do this.

Browserify, if you haven’t heard of it, allows you to use Node.js-style requires in your browser code:

Browserify supports «transforms», which are effectively plugins—just like there are gulp plugins to do different things with files in gulp, there are a number of Browserify transforms which allow you to do anything from support environmental variables from the machine the script was compiled on, or compile React’s JSX files.

One of these transforms is called babelify, which adds babel support to Browserify. In addition to just allowing you to use ES6 and use require() , it also transpiles import statements into require() statements, allowing you to use ES6 modules in your code:

You can use Browserify and babelify together using the following code:

The bundler.bundle() function returns a readable stream containing the processed code. We can use vinyl-source-stream and vinyl-buffer to convert this into something we can pipe to other gulp plugins and gulp.dest() : although the previous code does work completely fine, it’s best practice to avoid using the fs module in your gulpfile.

In a gulpfile, the previous code could look like this:

Finally—bonus round!—the following code adds support for source maps.

You should now know how to use ES6 in your gulp file—by installing babel and renaming your file to gulpfile.babel.js —and how to transpile ES6 code to ES5 using gulp, either using gulp-babel or babelify with Browserify.

If you get any weird errors at any point after updating to Babel 6, make sure you use the es2015 preset!

BabelJS — Working with BabelJS and Gulp

In this chapter, we will create project setup using babel and gulp. Gulp is a task runner that uses Node.js as a platform. Gulp will run the tasks that will transpile JavaScript files from es6 to es5 and once done will start the server to test the changes. We have used babel 6 in the project setup. In case you want to switch to babel 7, install the required packages of babel using @babel/babel-package-name.

We will create the project first using npm commands and install the required packages to start with.

command

We have created a folder called gulpbabel. Further, we will install gulp and other required dependencies.

command

We will add the Preset environment details to .babelrc file as follows

We have created three task in gulp, [‘build’,’watch’,’connect’]. All the js files available in src folder will be converted to es5 using babel as follows −

The final changes are stored in the dev folder. Babel uses presets details from .babelrc. In case you want to change to some other preset, you can change the details in .babelrc file.

Now will create a .js file in src folder using es6 javascript and run gulp start command to execute the changes.

Цукерберг рекомендует:  Рассчитываем размер базы данных


Использование ES6 в Gulp

Относительно недавно я начала использовать в своих проектах новый стандарт JavaScript, ES6. В этой записи я расскажу, как настроить Gulp, чтобы внутри gulpfile тоже можно было писать на ES6.

Способ 1, с использованием Babel

Так как я занимаюсь в основном фронтендом, то для того, чтобы код, написанный на ES6, запускался в браузере, я использую Babel. Сборку проекта я делаю при помощи Gulp. Поэтому, можно обработать gulpfile при помощи Babel.

Для нового проекта установка будет выглядеть так:

React и ES6 — Часть 1, Введение

Это первая статья из серии, в которой мы будем рассматривать использование React с ECMAScript 6.

Другие части вы можете найти по ссылкам:

В версии ReactJS v0.13.0 Beta 1 появилась совместимость ECMAScript 6 с компонентами React. Какие преимущества это дало разработчикам?

Что ж, ECMAScript 6 (или ECMAScript 2015) — это новый стандарт JavaScript, принесший множество новых особенностей в мир JavaScript. Таких как классы, стрелочные функции, rest параметры, итераторы, генераторы и многое, многое другое.

Если вы не знакомы с особенностями ECMAScript 2015, я рекомендую познакомиться с ними по ссылке.

Это здорово, но вгляните на таблицу совместимости ES6. Выглядит так, будто пройдут годы, пока мы сможем использовать ES6 в браузере (помните ситуацию с поддержкой ES5?).

К счастью, это не совсем так. Вам не придется ждать, пока разработчики браузеров реализуют поддержку ECMAScript 6 в браузерах. Существуют инструменты, называемые трансляторами, конвертирующие код, написанный на ES6, в ES5-совместимый код. Аналогично тому, как CoffeeScript транслируется в JavaScript.

Одно из таких решений называется Babel, действительно удивительный инструмент. Большое спасибо разработчикам. Что хорошо, Babel поддерживает огромное число различных фреймворков, систем сборки, тестовых фреймворков, шаблонизаторов — посмотрите здесь.

Чтобы получить краткое представление о том, как работает Babel, рассмотрим пример. Скажем, у нас есть следующий код:

После запуска Babel получим следующий код:

Аналогичные манипуляции применяются и к другим конструкциям ES6.

Подготовка окружения разработки

Для того, чтобы настроить неперерывную работу Babel, мы будем использовать Gulp. Это сборщик основан на node.js и может упростить вам жизнь, автоматизируя рутинные задачи. Если вы слышали о Grunt, то Gulp — это почти то же самое.

  • Очевидно, вам понадобится Node.js. Установите его в вашей системе, если он еще не установлен.
  • Далее, вам нужно установить Gulp глобально: npm install -g gulp.
  • Перейдите в директорию с проектом. Инициализируйте файл package.json с помощью команды npm init.
  • Запустите команду npm install —save react@0.13.x. Эта команда установит react в директорию node_modules и сохранит в качестве зависимости в package.json.
  • Запустите команду npm install —save-dev gulp browserify babelify vinyl-source-stream babel-preset-es2015 babel-preset-react. Эта команда установит зависимости разработки.

Чтобы узнать больше о модулях, установленных на шаге 5, пожалуйста, прочитайте статью.

Создание gulpfile.js

Создайте файл gulpfile.js в корневой директории проекта со следующим содержимым:

Надеюсь, некоторые объяснения будут полезны.


Строки 1-4. Мы подключаем необходимые node.js модули и инициализируем соответствующие переменные.

Строка 6. Объявляем задачу gulp с именем build, которая будет запускаться по команде gulp build.

Строка 7. Начинаем описывать, что должна делать команда. Мы говорим Gulp, что нужно использовать Browserify для app.jsx. В дополнение, мы включили режим отладки, который будет полезен при разработке.

Строки 8-11. Мы добавили трансформацию с помощью Babelify. Это позволит сконвертировать код на ECMAScript 6 в ECMAScript 5. Результат будем выводить в файл dist/bundle.js. Также мы подключили необходимые пресеты Babel.

Строки 14-16. Мы определили задачу с именем watch, которую будем запускать по команде gulp watch. Эта задача будет запускать gulp build при каждом изменении jsx файлов.

Строка 18. Мы определили задачу gulp, которая будет запускаться по команде gulp. Эта команда просто выполняет задачу watch.

Теперь ваш воркфлоу будет состоять из ввода команды gulp и нажатия клавиши Enter. Сборщик будет наблюдать за изменениями в компонентах React и пересобирать файлы непрерывно.

JSX и Babel

Вы, возможно, уже заметили, что мы использовали расширение .jsx вместо .js. JSX — это расширение синтаксиса JavaScript, разработанное командой ReactJS. Этот формат используется для упрощения написания компонентов ReactJS.

Другая полезная вещь — Babelify понимает синтаксис JSX из коробки (подробнее об этом в статье).

Первый компонент React на ECMAScript 6

Надеюсь, вы не слишком заскучали :)

Пришло время создать наш первый очень простой компонент на ES6. Добавим файл с именем Hello-world.jsx в корень проекта:

  • Строка 1. Мы подключаем библиотеку React и инициализируем переменную React.
  • Строки 3-8. Для создания компонента React используем класс ES6, наследующий от класса React.Component. Мы добавили простой метод render, выводящий тег

, содержащий свойство phrase.
  • Строка 9. Экспортируем созданный компонент с помощью export default HelloWorld.
  • Чтобы упростить понимание, я добавил код такого же компонента, но написанного без использования ES6 классов:

    Обертка

    Завершим наш простой пример.

    Создайте файл с имененм app.jsx:

    Мы импортируем компонент HelloWorld, созданный на предыдущем шаге и передаем свойство phrase.

    Далее, создайте файл index.html:

    Теперь запустите команду gulp в терминале (она создаст файл dist/bundle.js) и откройте HTML файл в браузере.


    Вы должны увидеть то же, что на изображении ниже.

    Для дополнительного чтения

    Нашли опечатку? Orphus: Ctrl+Enter

    © getinstance.info Все права защищены. 2014–2020

    Все права на материалы, публикуемые на данном сайте, принадлежат редакции сайта, за исключением случаев перепечатки чужих материалов, и охраняются в соответствии с законодательством РФ.

    Setting Up a Babel Project

    Current browsers don’t support all the new ECMAScript 6 (aka ECMAScript 2015) features yet (see comptability table). You need to use a compiler (transpiler) to transform your ECMAScript 6 code to ECMAScript 5 compatible code. Although there are other options, Babel has become the de-facto standard to compile ECMAScript 6 applications to a version of ECMAScript that can run in current browsers. Babel can also compile other versions of ECMAScript as well as React’s JSX, but that is beyond the scope of this tutorial.

    In this unit, you set up a development environment to develop and run an ECMAScript 6 application using Babel.

    Step 1: Install the Sample Application

    Clone the es6-tutorial repository that includes an ECMAScript 5 version of the mortgage application we use in this tutorial:

    Open index.html in your browser and click the Calculate button.

    Step 2: Set Up Babel

    As you just saw, the current version of the application runs in current browsers without compilation: it is written in pure ECMAScript 5. In this section, we set up Babel so that we can start using ECMAScript 6 features in the next unit.

    Open a command prompt, and navigate ( cd ) to the es6-tutorial directory.

    Type the following command to create a package.json file:

    Press the Return key in response to all the questions to accept the default values.

    Type the following command to install the babel-cli and babel-core modules:

    Type the following command to install the ECMAScript 2015 preset:

    Install http-server in your project. http-server is a lightweight web server we use to run the application locally during development.

    Open package.json in your favorite code editor. In the scripts section, remove the test script, and add two new scripts: a script named babel that compiles main.js to a version of ECMAScript that can run in current browsers, and a script named start that starts the local web server. The scripts section should now look like this:

    In the es6-tutorial directory, create a build directory to host the compiled version of the application.

    Step 3: Build and Run

    On the command line, make sure you are in the es6-tutorial directory, and type the following command to run the babel script and compile main.js:

    Open index.html in your code editor, and modify the

    Open a new command prompt. Navigate ( cd ) to the es6-tutorial directory, and type the following command to start http-server:

    If port 8080 is already in use on your computer, modify the start script in package.json and specify a port that is available on your computer. For example:


    Open a browser and access http://localhost:8080

    Click the Calculate button to calculate the monthly payment for the mortgage.

    Ecmascript 6 — Babeljs + Gulp + function* () {yield}

    14 просмотра

    1 ответ

    150 Репутация автора

    Я пытаюсь перевести мои ES6 js в ES5 js. Когда я посещаю веб-страницу https://babeljs.io/repl, чтобы проверить, что Babel должен выводить для предустановленного варианта, es2015 он выводит JavaScript, который отличается от того, какие gulp-babel выходы.

    Вход ES6 JavaScript

    babeljs.io выход

    gulp-babel выход

    ⚠️ Определите, как gulp-babel вывод содержит функции полиполнения, такие как _asyncToGenerator & asyncGeneratorStep .

    Почему редактор онлайн-бабелей не выводит это при использовании es2015 пресета?

    Другие полезные файлы

    Ниже мой .babelrc :

    Ниже мой package.json :

    Ниже моя js задача gulp :

    Ответы (1)

    плюса

    14706 Репутация автора

    @babel/preset-env это не то же самое, что @babel/preset-es2015 и предыдущее включение и выключение плагинов на основе ваших целевых показателей совместимости браузера (которые вы можете настроить) .

    Документы говорят, что если вы явно не укажете целевые объекты в конфигурации пресетов, будут использоваться следующие значения по умолчанию:

    Sidenote, если не указаны цели, @babel/preset-env ведет себя точно так же , как @babel/preset-es2015 , @babel/preset-es2020 и @babel/preset-es2020 вместе (или устаревшей babel-preset-latest ).

    @babel/preset-es2015 в одиночку, с другой стороны, будут компилировать только те функции, которые были добавлены в версию спецификации ES2015. Это не включает новые функции, такие как async / wait! Если вы хотите, чтобы все функции были добавлены с тех пор, вам нужно будет добавить все годовые пресеты. По этой причине рекомендуется использовать env пресет.

    ECMAScript 6

    Границы моего языка олицетворяют границы моего мира.
    — Людвиг Витгенштейн


    Последние несколько месяцев я пишу только ECMAScript 6 код, воспользовавшись трансформацией [1] в поддерживаемые в настоящее время версии JavaScript.

    ECMAScript 6, далее ES6 и ранее ES.next, является последней версией спецификации. По состоянию на август 2014 новые возможности не обсуждаются, но детали и крайние случаи до сих пор уточняются. Ожидается, что стандарт будет завершен и опубликован в середине 2015 года.

    Принятие ES6 одновременно привело к повышению производительности (что делает мой код более лаконичным) и ликвидации целого класса ошибок путем устранения распространённых подводных камней JavaScript.

    Более того, это подтвердило мою веру в эволюционный подход к языку и проектирования программного обеспечения, в противоположность clean-slate recreation .

    Это должно быть достаточно очевидным для вас, если вы использовали CoffeeScript, который сосредотачивается на хороших частях JS и скрывает плохие. ES6 смог принять на столько много инноваций из CoffeeScript, что некоторые даже ставят под сомнение дальнейшее развитие последнего.

    For all intents and purposes, JavaScript has merged CoffeeScript into master. I call that a victory for making things and trying them out.

    Вместо того, чтобы сделать тщательный анализ новых возможностей я расскажу о наиболее интересных из них. Чтобы стимулировать разработчиков обновляться, новые языки и фреймворки должны (1) иметь убедительную историю совместимости и (2) предлагать вам достаточно большую морковку.

    # Синтаксис модулей

    ES6 знакомит с синтаксисом для определения модулей и объявления зависимостей. Я подчеркиваю слово синтаксис потому что ES6 не имеет отношение к фактической реализации того, как модули будут выбраны или загружены.

    Это еще более укрепляет взаимодействие между различными контекстами, в которых может выполняться JavaScript.

    Рассмотрим в качестве примера простую задачу написания многоразового использования CRC32 в JavaScript.

    До сих пор, не существовало никаких рекомендаций о том, как на самом деле решить эту задачу. Общий подход это объявить функцию:

    С оговоркой, конечно же, что она вводит единое фиксированное глобальное имя, на которое другие части кода будут должны ссылаться. И с точки зрения кода, который использует crc32 функцию, нет способа объявить зависимость. Как только функция была объявлена, она будет существовать до тех пор, пока код не будет интерпретирован.

    В этой ситуации, Node.JS выбрал путь введения функции require и объектов module.exports и exports . Несмотря на успех в создании преуспевающей экосистемы модулей, возможности взаимодействия по-прежнему были несколько ограничены.

    Типичный сценарий, чтобы проиллюстрировать эти недостатки это генерация связки модулей для браузера, с помощью таких инструментов, как browserify или webpack. Они еще находятся в зачаточном состоянии, потому что они воспринимают require() как синтаксис, эффективно избавляя себя от свойственного им динамизма.

    Приведенный пример не подлежит статическому анализу, поэтому если вы попытаетесь транспортировать этот код в браузер, то он сломается:

    Другими словами, алгоритм упаковщика не может знать заранее, что означает woot().

    ES6 ввел правильный набор ограничений, учитывая большинство существующих вариантов использования, черпая вдохновение из самых неформально-существующих специальных модульных систем, как jQuery $.

    Синтаксис требует некоторого привыкания. Наиболее распространенный шаблон для определения зависимостей удивительно непрактичен.

    последний считается именованным экспортом и требует синтаксис в конструкции import:

    Другими словами, самая простая (и, пожалуй, наиболее желательная) форма определения модуля требует дополнительное ключевое слово default. Или в случае его отсутствия, использование при импорте.

    # Деструктуризация

    Одним из наиболее распространенных шаблонов, возникших в современном JavaScript коде является использование вариантных объектов.

    Такая практика широко используется в новых браузерных API, например в WHATWG fetch (современная замена XMLHttpRequest):

    Повсеместное принятие этой модели эффективно препятствует падению экосистемы JavaScript в логическую ловушку.

    Если принять, что API принимает обычные аргументы, а не объект с параметрами, то вызов fetch превращается в задачу запоминания порядка аргументов и ввода ключевого слова null в нужное место.


    Со стороны реализации, однако, это не выглядит так же красиво. Глядя на объявление функции, ее сигнатура больше не описывает входные возможности:

    Обычно это сопровождается ручной установкой значений по-умолчанию локальным переменным:

    И к сожалению для нас, несмотря на свою распространенность, практика использования || фактически привносит трудно выявляемые ошибки. Например, в этом случае мы не допускаем того, что opts.body может быть , поэтому надежный код скорее всего будет выглядеть так:

    Благодаря деструктуризации мы можем сразу четко определить параметры, правильно задать значения по умолчанию и выставить их в локальной области видимости:

    Собственно, значение по умолчанию можно применить и ко всему объекту с параметрами:

    Вы также можете деструктурировать оператор присваивания:

    Это напоминает мне о выразительности, предоставленные with, но без магии или негативных последствий.

    # Новые соглашения

    Некоторые части языка были полностью заменены лучшими альтернативами, что быстро станет новым стандартом того, как вы пишете JavaScript.

    Я расскажу о некоторых из них.

    # let/const вместо var

    Вместо того, чтобы писать var x = y скорее всего вы будете писать let x = y. let позволяет объявлять переменные с блочной областью видимости:

    Это особенно полезно для for или while циклов:

    Используйте const, если вы хотите обеспечить неизменяемость с той же семантикой, как и let.

    # строковые шаблоны вместо конкатенации

    В связи с отсутствием sprintf или подобными утилитами в стандартной библиотеки JavaScript, составление строк всегда было более болезненным, чем следовало бы.

    Строковые шаблоны сделали встраивание выражений в строки тривиальной операцией, также как и поддержку нескольких линий. Просто замените ‘ на `

    # классы вместо прототипов

    Определение класса было громоздкой операцией и требовало глубокого знания внутреннего устройства языка. Даже несмотря на то, что, польза понимания внутреннего устройства очевидна, порог входа для новичков был неоправданно высоким.

    class предлагает синтаксический сахар для определения функции конструктора, методов прототипа и геттеров / сеттеров. Он также реализует прототипное наследование со встроенным синтаксисом (без дополнительных библиотек или модулей).

    Я изначально был удивлен, узнав, классы не всплывают (hoisted) (объяснение тут). Поэтому вы должны думать о них, переводя в var A = function()<> в противоположность function A()<>.

    # ()=> вместо function

    Не только потому что (x, y) => <> короче написать, чем function (x,y) <>, но поведение this в теле функции, скорее всего, будет ссылаться на то, что вы хотите.

    Так называемые функции “толстые стрелки” лексически связанны. Рассмотрим пример метода внутри класса, который запускает два таймера:

    К ужасу новичков, первый таймер (с использованием function) выведет «undefined». А вот второй правильно выведет name.


    # Первоклассная поддержка async I/O

    Асинхронное выполнение кода сопровождало нас в течение почти всей истории языка. setTimeout, в конце концов, был введен примерно в то время, когда вышел JavaScript 1.0.

    Но, пожалуй, язык не поддерживает асинхронность на самом деле. Возвращаемое значение вызовов функций, которые запланированы “выполниться в будущем” обычно равны undefined или в случае с setTimeoutNumber.

    Введение Promise позволило заполнить очень большую пропасть в совместимости и композиции.

    С одной стороны, вы найдете API более предсказуемым. В качестве теста, рассмотрим новое fetch API. Как это работает за сигнатурой, которую мы только что описали? Вы угадали. Оно возвращает Promise.

    Если Вы использовали Node.JS в прошлом, вы знаете, что есть неформальная договоренность о том, что обратные вызовы следуют сигнатуре:

    Также неофициально указана идея о том, что обратные вызовы будут вызываться только один раз. И null будет значение в случае отсутствия ошибок (а не undefined или false). За исключением, возможно, это не всегда так.

    # Вперед к будущему

    ES6 набирает немалые обороты в экосистеме. Chrome и io.js уже добавили некоторый функционал из ES6. Много уже было написано об этом.

    Но стоит отметить то, что эта популярность была во многом обусловлена наличием утилит для трансформации, а не фактической поддержкой. Отличные инструменты появились, для того чтобы включить трансформацию и эмуляцию ES6, и браузеры со временем добавили поддержку отладки кода и отлова ошибок (с помощью карт кода).

    Эволюция языка и его предполагаемый функционал, опережают реализацию. Как говорилось выше, Promise — по-настоящему интересен как самостоятельный блок, который предлагает решение проблемы callback hell раз и навсегда.

    Стандарт ES7 предлагает сделать это путем введения возможности ожидания (async) объекта Promise:

    Хотя эта спецификация обсуждается уже давно, тот же инструмент, который компилирует ES6 в ES5 уже реализовал это.

    Предстоит еще много работы для того, чтобы убедиться, что процесс принятия нового синтаксиса языка и API становится еще более лишенным странностей для тех, кто только приступает к работе.

    Но одно можно сказать точно: мы должны принять это будущее.

    Сноски:
    1. ^ я использую слово “трасформация” в статье, чтобы объяснить компиляцию исходного кода в исходный код в JavaScript. Но значение этого термина технически спорно.

    Пробуем ES2015/ES6 в действии

    Буквально на днях (17 июня) свершилось то, чего ждали почти 6 лет в мире Javascript. Генеральное собрание Ecma International официально одобрило стандарт ECMA-262 6 версии, который является спецификацией языка ECMAScript 6 (ES6), который так же называют ECMAScript 2015. Предыдущий стандарт языка Javascript был одобрен в 2009 году (ES5).

    Теперь дело за браузерами, которые начнут усиленно внедрять спецификацию языка в свои движки. Следить за поддержкой ES2015 удобно на сайте kangax.github.io/compat-table/es6.

    Некоторые термины:

    • ECMAScript — это официальный стандарт языка JavaScript.
    • TC39 — комитет, развивающий стандарт ECMAScript и принимающий решения по внедрению нового функционала.
    • Внутри самого ECMAScript много стандартов. Самый популярный из них — ECMA-262.


    Немного истории

    Архив стандарта ECMA-262 можно посмотреть на официальном сайте.

    Обзор нововведений в ECMAScript 6:

    • Поддержка классов14.5.
    • Шаблоны строк12.2.9, 12.3.7, предоставляющие удобные средства для форматирования строк.
    • Поддержка лексических объявлений переменных13.2.1 (Lexical Declarations), позволяющих ограничить текущим блоком область видимости ключевых слов, через их повторное определение при помощи оператора let вместо var
    • Оператор const13.2.1 для определения переменных, доступных только для чтения
    • Сокращённый формат задания объектов13.2.1 (запись var a = <'obj1': obj1, 'obj2': obj2>теперь можно сократить до var a = )
    • Модули15.2. Для экспорта и импорта модулей введены операторы export и import, например, import * as mymodule from «lib/mymodule . Предоставляются средства динамической загрузки модулей, пространства имён и изоляция состояния
    • Arrow-функции14.2 (синтаксис => ) для быстрого определения анонимных функций (например, x.map(x => console.log(x * x)); )
    • Добавлен новый тип Symbol19.4, применимый для идентификаторов свойств объектов
    • Генераторы25.2, позволяющие организовать эффективное выполнение функций в асинхронном режиме. Генераторы представляют собой специальные функции, генерирующие итераторы. Использование выражения yield для генератора, позволяет приостановить его выполнение и вернуть управление вызвавшей генератор функции. Особенность генератора состоит в том, что последующие вызовы будут использовать предыдущее состояние и продолжат выполнение кода генератора с того места, где он был приостановлен
    • Объект WeakSet23.4, позволяющий определить множество из объектов, и объект WeakMap23.3, определяет коллекцию пар ключ/значение в которых ключ является объектом, к которому может быть прикреплено произвольное значение. WeakSet и WeakMap отличаются использованием эффективных с точки зрения потребления памяти структур, использующих сборщик мусора для удаления неиспользуемых объектов (объект удаляется, если на него больше не осталось ссылок, кроме ссылки из текущей коллекции) и предотвращающих возникновение утечек памяти;
    • Механизм Promise25.4, предназначенный для получения значений в асинхронном режиме. Позволяет определить значение, которое пока неизвестно, но будут определено через какое-то время
    • Значения по умолчанию для аргументов функций19.2 (например, function myfunc(a=’test’, b=1) )
    • Передача в функцию произвольной группы параметров в форме массива19.2 (например, function myfunc(a, b, . c) )
    • Cтруктуры данных Map и Set23.1, 23.2, упрощающих работу со специфичными типами коллекций. Map позволяет определять коллекции наборов в формате ключ/значение, при том, что в качестве ключа и значения могут выступать любые выражения JavaScript. По аналогии Set позволяет задать множество любых выражений JavaScript;
    • Поддержка абстракции массивов (Array comprehensions), дающих возможность создания нового массива на основе другого массива;

    Добавлено множество методов для строк, массивов и математических операций, в том числе:

    В дополненение к списку хочу упомянуть хороший сайт es6-features.org, поддерживаемый @engelschall, на котором приводятся обзор и сравнение новых фич из ES6 c ES5.

    А пока разработчики браузеров пишут свои движки с поддержкой ES2015, мы можем попробовать новый стандарт в действии уже сейчас. Например, сейчас большинство возможностей ES2015 в Chrome скрыто под флагом chrome://flags/#enable-javascript-harmony. Включив это свойство и перезапустив браузер, можно уже сейчас использовать следующие функции ES2015.

    У @addyosmani есть замечательный репозиторий, где он собрал коллекцию es6-tools. Первым в списке стоит Babel. Давайте разберем его подробнее и узнаем, как с помощью него можно уже сейчас писать код на ES6.

    Babel

    Babel — это JavaScript транскомпилятор. Если кратко, то транскомпилятор отличается от компилятора тем, что он переводит код из новой версии в более старый — стабильный. Подробнее про транскомпиляторы можно почитать тут. Как написано на их сайте:

    By default, Babel ships with a set of ES2015 syntax transformers. These allow you to use new syntax, right now without waiting for browser support.

    и это то, что нам нужно! Поиграться с этим транскомпилятором, не устанавливая его, можно прямо на сайте babeljs.io/repl/. Если мы хотим написать что-то серьезное, то нам нужно установить и начать использовать этот транскомпилятор.

    Пишем свой первый класс на ES2015

    Используем сервис codepen.io и включим в настройках поддержку Babel. В своем примере я продемонстрировал новые возможности ES2015: классы, их наследование и шаблоны строк.

    See the Pen yNpWYY by Alex Filatov (@greybax) on CodePen.

    ECMAScript 2015 и gulp-babel: импорт классов

    У меня проблема с импортированием классов (ECMAScript 2015) из других файлов. Мой index.js очень короткий:

    и вызван правильно через a в index.html, но затем он производит:

    Uncaught TypeError: Не удается прочитать свойство «Viewer3D» неопределенного

    при попытке вызвать конструктор Viewer3D.

    Теперь, если я копирую источник Viewer3D в index.js (удаление строки импорта), все работает нормально.

    Но как я могу работать с несколькими исходными файлами JS?

    Большое спасибо за вашу помощь.

    Соответствующая часть моего скрипта gulpfile.js:

    Соответствующая часть моего package.json:

    Мой минимальный viewer3D.js:

    Примечание: Конечно, я не собирал исходные файлы в моем скрипте gulpfile.js, они просто скомпилированы в папку dist и отправлены через

    Примечание 2:

    Я нашел частичное решение (используя webpack) здесь:

    Но исходных карт нет . поэтому отладки не возможно .

    Цукерберг рекомендует:  Делаем боковое меню как на YouTube
    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих