Фото Мэтта Арца на Unsplash
Также опубликовано @ CatStache.io
Одна вещь, с которой я обычно вижу новые разработчики JavaScript, и я нашел особенно раздражающим при прыгании обратно, была эта концепция компиляции при разработке с современным JavaScript, а также всем другим инструментом в экосистеме.
В этой серии я хочу перейти к «почему», имея сборку для вашего кода переднего конца, и пройти через создание совершенно нового проекта с нуля.
Что случилось с хорошими днями?
Если бы я сказал вам открыть инструменты разработчика в своем браузере по выбору, вы могли бы легко начать писать JavaScript и выполнять его. В Firefox я могу просто запрыгнуть в консоль и тип const => a * a; И после выполнения этого кода я мог ввести f (5); и ожидайте увидеть выходные данные 25.
На самом деле, я могу продолжить этот путь и открыть свой любимый текстовый редактор, создать документ HTML 5 с тегом сценария и поместить большинство JavaScript, которые я хотел бы там:
My Test Page
Hello, !
Это все в порядке, и вы увидите, что я по -прежнему использовал «более новый» синтаксис, такой как const без проблем. Но допустим, что я хочу получить немного причудливого и использовать Синтаксис параметров отдыха :
Когда я открываю это в Firefox, он, похоже, работает так, как и задумано, но как хороший фронт -разработчик, я начинаю тестировать во всех своих браузерах. Я замечаю, что у меня есть проблемы с IE, Edge и Safari! Быстрая консультация caniuse.com Показывает мне, что этот синтаксис не поддерживается в этих браузерах 😞
Итак, каковы мои варианты? Я могу выбрать уход от этого нового синтаксиса и найти что -то, что работает во всех браузерах, я могу отказаться от поддержки этих трех браузеров (удачи с этим!), Или я могу изучить процесс настройки, который будет либо полифиль, либо построить назад назад! Совместимый код для меня!
Эта статья фокусируется на последнем варианте, варианте сборки.
Я могу жить без синтаксиса отдыха
Это может быть правдой, но то, что было проиллюстрировано выше, было лишь одним экземпляром проблем с обратной совместимостью – сегодня многие существуют, и это будет проблема, продвигающаяся вперед, поскольку определяются новые версии Ecmascript.
Ecmascript – это спецификация, с которой JavaScript соответствует. Последняя версия на момент написания написания Ecmascript 2019 который был опубликован в июне 2019 года. Синтаксис REST был добавлен в версии Ecmascript 2018, так что это может показать вам, как браузеры отстают!
JavaScript, скорее всего, всегда будет иметь эту проблему – новые стандарты будут созданы и выпущены задолго до того, как все поставщики браузеров смогут обновить свой двигатель JavaScript. В некоторых случаях, как и Internet Explorer, новые обновления будут отброшены все вместе, так как браузер – закат солнца . К сожалению, в зависимости от того, кто является вашей целевой аудиторией, вам, возможно, придется поддерживать эти браузеры еще долго после того, как они «вышли на пенсию».
Поскольку мы хотим воспользоваться новой спецификацией Ecmascript, а также ориентируясь на столько платформ, насколько это возможно, нам нужно рассмотреть решения, чтобы помочь нам достичь этого!
Вавилон
Вавилон Это то, к чему я привык, когда хочу иметь свой торт и съесть его. Слоган на баннере веб -страницы даже «используйте JavaScript следующего поколения сегодня. “Это именно то, что мы хотим сделать.
Одна вещь, которую я предлагаю, это перейти к “Попробуй это” Ссылка, которая приведет вас к реплике (петля Read-Evaluate Print) с включенным Babel. Если вы напишете какой -либо JavaScript следующего поколения, он составит его с обратным совместимым JavaScript!
Пример, который прокручивается на главной странице, принимает следующий фрагмент
[1,2,3].map(n => n **2);
И результат заключается в следующем:
"use strict";
[1, 2, 3].map(function (n) {
return Math.pow(n, 2);
});
Потрясающий! Потратьте некоторое время, чтобы поиграть с различными функциональными возможностями, чтобы увидеть, какой скомпилированный JavaScript возвращается.
И только для завершения, и поскольку никто никогда не может иметь достаточно фрагментов кода, вот код оператора REST, который мы написали ранее, и его скомпилированный вывод.
До:
function sum(...nums) {
return nums.reduce((prev, curr) => prev + curr);
}
console.log(sum(1, 2, 3, 4, 5));
После:
"use strict";
function sum() {
for (var _len = arguments.length, nums = Array(_len), _key = 0; _key < _len; _key++) {
nums[_key] = arguments[_key];
}
return nums.reduce(function (prev, curr) {
return prev + curr;
});
}
console.log(sum(1, 2, 3, 4, 5));
Я не знаю о тебе, но я предпочитаю писать первый фрагмент 😉
Основы использования Babel
Вернувшись на веб -страницу Babel, есть раздел для настройка Итак, давайте посмотрим на это! Первое, что вы заметите, это то, что есть множество различных вариантов, и если вы новичок в экосистеме, это будет ошеломляющим. Итак, давайте сделаем другой подход для этого первого шага – мы вернемся к этому этапу в более позднем посте специально о объединении активов, в частности, рассмотрение WebPack Анкет
На данный момент мы сосредоточимся на Руководство по использованию в документации. Вам также нужно будет Установить node.js и npm на вашей предпочтительной платформе следовать.
Первым шагом будет создание нового каталога, который мы будем называть, Строительство И мы переведем в этот каталог и создам создание нового проекта узла.
mkdir build-tooling cd build-tooling npm init -y
Это создаст Package.json для вашего проекта с настройками по умолчанию! Далее мы будем следовать шагу 1 из руководства по использованию Вавилона:
npm i --save-dev @babel/core @babel/cli @babel/preset-env npm i @babel/polyfill
@Babel/Core это то, как это звучит, мясо и картофель компилятора! Это то, что займет код, который мы пишем, и выведет обратный совместимый код, который мы видели ранее.
@Babel/Cli это интерфейс командной строки (CLI), который позволяет нам запустить команду, которая будет указывать наш входной каталог и выходной каталог.
@Babel/Preset-env это предустановка, которая значительно облегчает нашу жизнь, не нуждаясь в микроуправлении, которая преобразуется для применения, и какие полифиллы для предоставления.
Далее мы будем следовать и создадим новый файл, Babel.config.js Чтобы настроить некоторые основные свойства для нашего проекта:
const presets = [
[
"@babel/env",
{
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1",
},
useBuiltIns: "usage",
},
],
];
module.exports = { presets };
Теперь нам просто нужно написать код и собрать его! Давайте напишем самый интересный код в мире и поместим его в src/engence.js !
const sum = (...nums) => {
return nums.reduce((prev, curr) => prev + curr);
};
const mergeState = (curr, next) => {
const updated = { ...curr, ...next };
return [next, updated];
};
export { sum, mergeState };
Это, очевидно, очень полезный раздел кода, поэтому давайте скомпилируем его, чтобы мы могли отправить его как можно скорее! 🚀
Затем мы перейдем к нашей командной строке и вводим следующую команду, чтобы вызвать CLI Babel:
./node_modules/.bin/babel src --out-dir dist
Когда вы выполняете команду, вы должен См. Успешный метод компиляции с файлом с именем Интересно.js В новом каталоге под названием Dist. Если мы откроем этот файл, нас ударит этим!
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.mergeState = exports.sum = void 0;
require("core-js/modules/es6.symbol");
require("core-js/modules/web.dom.iterable");
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
const sum = function sum() {
for (var _len = arguments.length, nums = new Array(_len), _key = 0; _key < _len; _key++) {
nums[_key] = arguments[_key];
}
return nums.reduce((prev, curr) => prev + curr);
};
exports.sum = sum;
const mergeState = (curr, next) => {
const updated = _objectSpread({}, curr, {}, next);
return [next, updated];
};
exports.mergeState = mergeState;
Ух ты! Это довольно аккуратно, и нам вряд ли что -то пришлось сделать. Давайте добавим сценарий в нашу Package.json, чтобы нам не нужно помнить синтаксис CLI каждый раз, когда мы хотим компилировать. Ваша ключ “сценариев» может быть изменена, чтобы выглядеть так:
"scripts": {
"build": "./node_modules/.bin/babel src --out-dir dist"
},
Теперь выполнение NPM Run Build должен взять все в SRC Справочник и составьте его и поместите в Dist Анкет
Что теперь?
Что ж, технически у вас есть все, что вам нужно, чтобы написать JavaScript следующего поколения и составить его обратно совместимым. Если вы продолжите создавать новые файлы и компилировать, вы начнете замечать, что это просто создаст новое скомпилированное с тем же именем в Dist Справочник – это не кажется очень управляемым или масштабируемым. Вот где что -то вроде WebPack вступает в игру! В следующий раз мы рассмотрим, какова его цель, как его можно настроить, и мы также рассмотрим некоторые другие инструменты в его пространстве, такие как Rollup и Parcel.
Если у вас есть какие -либо вопросы, нужны разъяснения или хотите, чтобы я более подробно рассказал об этом первом инструменте и процессе, дайте мне знать! Я хочу попытаться сделать это целостным знакомством с инструментом JavaScript!
Оригинал: “https://dev.to/bamartindev/modern-javascript-tooling-compiling-4mah”