Быстрое и грязное использование функций ECMAScript во внешнем интерфейсе.

Как вы, возможно, уже поняли из случайных явных пробелов в моих знаниях в области программирования, я потратил на программирование не так много времени, как, ну, в общем, любой, кто случайно выбросил 8-летнюю карьеру в сфере управления продуктами. Судя по всему, за 8 лет многое может произойти ... особенно когда дело касается JavaScript.
Если отбросить всю эту серверную штуку NodeJS или как там ее называют, те из нас, кто совсем недавно вернулся в разработку, стоит много лет. . В наше отсутствие мир постоянно ворчал, глотал, ворчал и даже неуравновешивался. Предположим, мы все это прошли ... уф. Ой, подождите, я забыл упомянуть чудовищность фразы «эй, кстати, есть эта неразбериха с труднообъяснимым (протоколом? Организацией? Fancy Github Repo?) Под названием Babel, от которого мы все зависим, чтобы делать значимое дерьмо в браузере в наши дни».

Если вы здесь, потому что пытаетесь понять, что, черт возьми, делают все эти ключевые слова «const» и «import» в современном браузере JavaScript, подумайте об этом наполовину фокус-группе и наполовину для начала работы. Остальным из вас, опытным разработчикам JS, возможно, стоит остаться. Нет, во что бы то ни стало, я бы хотел, чтобы вы сидели здесь и думали о том, какую экосистему вы решили исправить вместе. Сделай это; в противном случае я мог бы просто позвонить Кику, чтобы узнать, какие еще крошечные модули NPM они хотели бы произвольно потребовать удаления ... помните это? Точно. А теперь подумайте о том, что вы сделали.

ECMAScript и обратная совместимость в Интернете

В доме есть ветераны ActionScript? Нет? Просто я? Здорово. В любом случае, у ActionScript, JavaScript и множества Whateverscripts есть что-то общее: все они реализации ECMAScript: древнего эквивалента сравнения латыни с испанским или французским, но только одна дополнительная деталь: ECMAScript по-прежнему остается живым языком, и постоянно совершенствуется. Если бы какая-то нация крутых кошек по-прежнему активно использовала латынь и постоянно придумывала новые болезненные жаргонные термины, те, кто говорит по-французски или по-испански, были бы бессильны придумать фразы, почти такие же крутые, как «освещенный» или «семейный» (или какими бы ни были эти латинские эквиваленты).

Проблема в том, что веб-браузеры по своей сути являются уродствами с обратной совместимостью. Большинство компаний, генерирующих доход, смотрят на свою ›5% -ную базу пользователей, использующих Internet Explorer, три с половиной и думают:« Боже мой, это пять процентов нашего потенциального дохода »(это не так). Вот где мы находимся.

Новые возможности? Для ИНТЕРНЕТА?

Я помню, как в один уик-энд я снимал номер в отеле с единственной целью - завершить разработку приложения, основанного на MongoDB Stitch. Я был почти уверен, что все это выяснил, но обнаружил, что что-то в руководствах Mongo по быстрому запуску показалось мне неуместным (я имею в виду, более неуместным, чем остальные их почти нечитаемые документы). Почему Монго настаивал на встроенном JavaScript? Разве мы не прошли через те дни, когда PHP, HTML, CSS и JS жили на одной странице?

Все, кто не был мной в свое время, уже знают, что JavaScript на протяжении многих лет пожинал плоды новой эволюции ECMAScript, но есть одна загвоздка: только самые современные браузеры знают, что, черт возьми, делать с этими новыми функциями. (да), и они делают это только с ужасными блоками, брошенными на HTML-страницы. Попытка использовать современные функции ECMA в связанном файле JS, который не был предварительно скомпилирован, подобна делению на ноль. Серьезно, ты можешь умереть.

Вавилон спешит на помощь

Дальнейшие исследования приводят только к большему количеству вопросов. Кто этот Волшебник Browserify и почему он мертв? Что делает Webpack, чтобы финансировать весь их высокопроизводительный брендинг, и зачем кому-то покупать футболку Webpack? Наконец, самый главный вопрос: кто, черт возьми, этот парень из Вавилонской башни, который от сильных наркотиков производит удар электрическим током в лицо?

Я думаю, что именно в этот момент моего путешествия наверстать упущенное за последнее десятилетие я по-настоящему сошел с ума и начал расхаживать по своей комнате, словесно оскорбляя неодушевленные предметы, и в конце концов даже оказался выброшенным на улицу Венди, дрожа и плачу про себя.

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

Что, черт возьми, происходит

Поскольку Javascript как язык предназначен для обеспечения обратной совместимости с годом, когда О. Джей Симпсон находился на испытаниях, а Windows 95 считалась передовой технологией, Babel стремится «улучшить» Javascript браузера. Поскольку на самом деле мы не можем улучшить или изменить базовую технологию, Babel рассматривает новомодный синтаксис ECMA (содержащий такие слова, как require, const или promise) и компилирует логику, эквивалентную этим функциям, с помощью стандартного Javascript. Если это похоже на то, как Gulp принимает препроцессоры CSS (например, LESS или SASS) и превращает эти файлы в интерпретируемый код браузера, что ж, это точно что случается.

Gulp - не единственный способ использовать новые функции ECMAScript. Синтаксис Babel можно скомпилировать несколькими способами, например, Babel's CLI, или из серверного JS, или Webpack, если вы Mister Fancy Pants. Фактически, общая тенденция заключается в том, что компиляция вашего сайта с модулями через Webpack значительно выигрывает. Насколько нам известно, это могло быть последним когда-либо написанным руководством по Babel Gulp.

Прямо сейчас мы сосредоточены на возможности использования функций ECMAScript во внешнем интерфейсе; распространенный вариант использования для таких вещей, как… ну… тематизация уровня представления для блога. Если нам удастся реализовать это с помощью Gulp, у вас, вероятно, не будет особых проблем с будущими методами.

Пакеты Babel NPM

Хорошо, значит, Babel - это не просто пакет NPM. Это много. Давайте посмотрим, что есть в базовом package.json:

{
  "name": "example",
  "scripts": {
    "build": "babel src -d lib"
  },
  "presets": [
    "env"
  ],
  "engines": {
    "node": "8.12.0"
  },
  "dependencies": {
    "@babel/polyfill": "^7.0.0",
    "@babel/runtime": "^7.1.2",
    "@babel/runtime-corejs2": "^7.1.2",
    "babel-runtime": "^6.26.0",
    "gulp-resolve-dependencies": "^2.2.0",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-uglify-es": "^1.0.4",
  },
  "devDependencies": {
    "@babel/cli": "^7.1.2",
    "@babel/core": "^7.1.2",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
  }
}

Давайте не будем вдаваться в подробности всего этого - давайте взглянем на наш gulpfile.js:

'use strict';
var gulp = require('gulp'),
  concat = require('gulp-concat'),
  autoprefixer = require('gulp-autoprefixer'),
  sourcemaps = require('gulp-sourcemaps'),
  babel = require('gulp-babel'),
  resolveDependencies = require('gulp-resolve-dependencies'),
var paths = {
  scripts: {
    src: 'src/js/*.js',
    dest: 'assets/js'
  }
};
function scripts() {
  return gulp.src(paths.scripts.src)
    .pipe(babel({
          presets: ['@babel/env'],
          plugins: ['@babel/transform-runtime', '@babel/plugin-syntax-dynamic-import']
    }))
    .on('error', console.error.bind(console))
    .pipe(resolveDependencies({
            pattern: /\* @requires [\s-]*(.*\.js)/g
        }))
    .pipe(concat('main.min.js'))
    .pipe(gulp.dest(paths.scripts.dest));
}

Обратите внимание, что я удалил из файла все, что не имеет ничего общего с Babel - все, что здесь показано, имеет прямое отношение к созданию задачи «скрипты». Суть такова:

babel принимает два массива:

  • Наборы - это версия ECMAScript, на которую мы ориентируемся, и то, что у нас подразумевается, подразумевает самую последнюю версию.
  • Плагины позволяют передавать любые плагины, поддерживаемые Babel; в этом случае мы рендерим материал во время выполнения. Не будем вдаваться в подробности.

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

Когда дело доходит до наилучшего способа достижения ECMAScript 2015 или 2016 и т. Д. В браузере, я не эксперт. Как упоминалось ранее, понимание, которое я передал вам, - это своего рода минимум, чтобы начать делать великие дела.

Что касается того, что делают другие, я готов поспорить, что подавляющее большинство разработчиков, использующих новые функции ECMAScript, используют такие фреймворки, как React, в то время как остальные пришли к консенсусу, что Webpack - король, а Gulp - отстой. Это может быть правдой.

Как бы то ни было, эта новая сила открывает множество дверей. Подождите, пока вы не увидите, что мы делаем с MongoDB Stitch.

Первоначально опубликовано на сайте hackersandslackers.com 6 октября 2018 г.