JavaScript => Transpiling

Вступление

Transpiling - это процесс интерпретации определенных языков программирования и перевода его на определенный целевой язык. В этом контексте трансляция займет языки компиляции в JS и переведет их на целевой язык Javascript.

замечания

Transpiling - это процесс преобразования исходного кода в исходный код, и это общая деятельность в разработке JavaScript.

Функции, доступные в обычных приложениях JavaScript (Chrome, Firefox, NodeJS и т. Д.), Часто отстают от последних спецификаций ECMAScript (ES6 / ES2015, ES7 / ES2016 и т. Д.). Как только спецификация будет одобрена, она, безусловно, будет доступна изначально в будущих версиях приложений JavaScript.

Вместо того, чтобы ждать новых версий JavaScript, инженеры могут начать писать код, который будет запускаться изначально в будущем (будущая проверка), используя компилятор для преобразования кода, написанного для более новых спецификаций, в код, совместимый с существующими приложениями. Общие транспилеры включают Babel и Google Traceur .

Transpilers также может использоваться для преобразования с другого языка, такого как TypeScript или CoffeeScript, на обычный, «ванильный» JavaScript. В этом случае преобразование преобразует с одного языка на другой язык.

Введение в транспилинг

Примеры

ES6 / ES2015 - ES5 (через Babel ) :

Этот синтаксис ES2015

// ES2015 arrow function syntax 
[1,2,3].map(n => n + 1);

интерпретируется и переводится на этот синтаксис ES5:

// Conventional ES5 anonymous function syntax 
[1,2,3].map(function(n) {   
    return n + 1; 
});

CoffeeScript для Javascript (через встроенный компилятор CoffeeScript) :

Это CoffeeScript

# Existence:
alert "I knew it!" if elvis?

интерпретируется и переводится на Javascript:

if (typeof elvis !== "undefined" && elvis !== null) {
  alert("I knew it!");
}

Как перекрыть?

Большинство языков компиляции для Javascript имеют встроенный транспилятор (например, в CoffeeScript или TypeScript). В этом случае вам просто нужно включить транспилятор языка через настройки конфигурации или флажок. Дополнительные настройки также могут быть установлены в отношении транспилятора.

Для трансиляции ES6 / ES2016-to-ES5 наиболее известным транспилером является Babel .

Зачем мне переводить?

К числу наиболее значимых преимуществ относятся:

Возможность надежно использовать новый синтаксис
Совместимость большинства, если не всех браузеров
Использование отсутствующих / еще не встроенных функций для Javascript через такие языки, как CoffeeScript или TypeScript

Начните использовать ES6 / 7 с Babel

Поддержка браузера для ES6 растет, но, чтобы быть уверенным, что ваш код будет работать в средах, которые полностью не поддерживают его, вы можете использовать Transbiler от Babel , ES6 / 7 до ES5, попробуйте!

Если вы хотите использовать ES6 / 7 в своих проектах, не беспокоясь о совместимости, вы можете использовать UI и Babel CLI

Быстрая настройка проекта с поддержкой Babel для ES6 / 7

Загрузите и установите узел
Перейдите в папку и создайте проект, используя ваш любимый инструмент командной строки

~ npm init

Установить Babel CLI

~ npm install --save-dev babel-cli
~ npm install --save-dev babel-preset-es2015

Создайте папку scripts для хранения ваших .js файлов, а затем папку dist/scripts которой будут храниться полностью совместимые файлы.
Создайте файл .babelrc в корневой папке вашего проекта и напишите на нем

{
    "presets": ["es2015"]
}

Измените файл package.json (созданный при npm init ) и добавьте скрипт build в свойство scripts :

{
    ...
    "scripts": {
    ... ,
    "build": "babel scripts --out-dir dist/scripts"
    },
    ...
}

Наслаждайтесь программированием в ES6 / 7
Выполните следующее, чтобы передать все ваши файлы в ES5

~ npm run build

Для более сложных проектов вы можете взглянуть на Gulp или Webpack

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow

JavaScript
Transpiling

Поиск…