Babel npm: Babel · The compiler for next generation JavaScript

Начало работы · Jest

Установите Jest с помощью yarn:

Или npm:

Примечание: документация Jest использует команды yarn, но npm также будет работать. Вы можете сравнить команды yarn и npm в документации yarn, здесь.

Для начала напишем тест для функции, которая складывает два числа. Во-первых создайте файл sum.js:

Затем создайте файл с именем sum.test.js. Он будет содержать сам тест:

Добавьте следующий раздел в package.json:

Наконец, запустите yarn test или npm run test и Jest выведет это сообщение:

Вы только что успешно написали первый тест с использованием Jest!

Данный тест использует expect и toBe для проверки идентичности двух данных значений. Чтобы узнать об остальных вещах, которые можно протестировать с использованием Jest, смотрите использование сопоставлений.

Запуск из командной строки#

Вы можете запустить Jest прямо из командной строки (если он глобально доступен в PATH, например yarn global add jest или npm install jest --global) с множеством полезных опций.

Вот так можно запустить Jest для проверки файлов совпадающих с my-test, используя config.json в качестве файла конфигурации и для отображения нативного уведомления ОС после завершения:

Если вы хотите узнать больше о работе с jest в командной строке, обратите внимание на страницу параметров командной строки Jest.

Дополнительная конфигурация#

Создание базового файла конфигурации#

Исходя из ваших нужд, Jest задаст вам несколько вопросов и создаст базовый файл конфигурации с кратким описанием для каждой опции:

С использованием Babel#

Для использования Babel, установите необходимые зависимости через yarn:

Настройте Babel на вашу текущую версию Node Js, создав файл babel.config.js в корне вашего проекта:

Идеальная конфигурация для Babel будет зависеть от вашего проекта. Смотрите документацию Babel для получения дополнительной информации.

**Добавление отдельной конфигурации для Babel только на время запуска Jest**

Jest автоматически установит для process.env.NODE_ENV значение 'test' если не указано другое. Вы можете использовать эту опцию, чтобы добавить настройки, которые будут использоваться только во время запуска Jest, например:

Примечание: babel-jest автоматически устанавливается при установке Jest и преобразует файлы если в вашем проекте есть существующая конфигурация babel. Для обхода данного поведения, вы можете явно сбросить опцию transform в конфигурации:

**Поддержка Babel 6**

В 24-й версии Jest прекратил поддерживать Babel 6. Мы настоятельно рекомендуем вам обновиться до Babel 7, который активно поддерживается. Однако, если вы не можете перейти на Babel 7, то либо используйте Jest 23, либо обновитесь до Jest 24 вручную заблокировав babel-jest на 23-й версии, как показано ниже:

Хотя мы обычно рекомендуем использовать одну и ту же версию каждого пакета Jest, данное решение позволит вам продолжить использовать последнюю версию Jest с Babel 6.

С использованием Webpack#

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

С использованием Parcel#

Jest может использоваться в проектах, использующих parcel-bundler для управления изображениями, стилями и компиляцией аналогично webpack Parcel не требует настройки Обратитесь к официальной документации.

С использованием TypeScript#

Jest поддерживает TypeScript, через Babel. Сначала убедитесь, что вы следовали инструкциям по настройке Babel выше. Далее установите @babel/preset-typescript через yarn:

Затем добавьте @babel/preset-typescript в список пресетов в ваш babel.config.js.

Однако, есть несколько подводных камней в использовании TypeScript вместе с Babel. Поскольку TypeScript поддерживается в Babel через транспиляцию, Jest не будет проверять типы ваших тестах когда они запущены. Если вы хотите, то вы можете использовать ts-jest взамен, или просто запустите компилятор TypeScript tsc отдельно (или как часть вашего процесса сборки).

Вы также можете установить модуль @types/jest для версии Jest которую вы используете. Это поможет обеспечить полный набор текста при написании ваших тестов с TypeScript.

Для модулей @types/* рекомендуется сопоставлять версию Jest с версией связанного модуля. Например, если вы используете 26.4.0 версию jest , то использование 26.4.x из @types/jest является идеальным. В целом, старайтесь максимально приблизить основную (26) и минорную (4) версию.

Vscode использует npm для установки babel

Babel

Babel — компилятор JavaScript

Babel — это цепочка инструментов, в основном используемая для преобразования кода ECMAScript 2015+ в обратно совместимую версию кода JavaScript в старых браузерах или средах:

• Грамматика преобразования
• Polyfill реализует недостающие функции в целевой среде (по@babel/polyfill)
• Преобразование исходного кода (codemods)
• Больше! (Посмотретьвидео）

Официальная документация Babel

Установить npm

Перейдите прямо на официальный сайт nodejs:https://nodejs.org/en/

После завершения загрузки откройте его и продолжайте нажимать кнопку «Далее» для надежной установки. Возможны ошибки (Ошибка команды npm: EINVAL: недопустимый аргумент, mkdir）

Содержание на изображении выше показывает, что установка прошла успешно.

Vscode-Part

Откройте терминал проекта в Vscode:

Ввод: npm install -g babel-cli

Установка прошла успешно.

Установите плагин babel: npm install —save-dev babel-preset-env

Проблемы, с которыми вы можете столкнуться:Возникла проблема с установкой npm: запустите ‘npm audit fix’, чтобы исправить их, или ‘npm audit’, чтобы узнать подробности (установите babel)

Или напрямую используйте одну строку командной строки для одноразовой установки:

npm i babel-core babel-preset-es2015 babel-cli

Ранее использовалось: в файле package.json, созданном npm init

Вы также можете увидеть соответствующую конфигурацию babel в файле package.json:

И добавьте следующий код:

«scripts»: {

    «babel»:»babel app.js —watch —out-file appicompiled.js»

  },

Поскольку вы не можете напрямую использовать командную строку babel для выполнения связанных операций в терминале, приведенный выше код означает преобразование кода app.js (ES6) в код appicompiled.js (ES5):

После преобразования:

Конфигурация всех файлов

launch.js

{
    // Используйте IntelliSense для понимания связанных атрибутов. 
         // Наведите курсор, чтобы увидеть описания существующих свойств.
         // Для получения дополнительной информации посетите: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [{
        "type": "node",
        "request": "launch",
                 "name": "Запустить программу",
                 "program": "$ {workspaceRoot} /src/index.js", // Файл для компиляции
        "stopOnEntry": false,
        "args": [],
        "cwd": "${workspaceRoot}",
                 // "babelWatch" здесь должно быть таким же, как taskName в задачах на предыдущем шаге
        "preLaunchTask": "babelWatch",
        "runtimeExecutable": null,
        "runtimeArgs": ["--nolazy"],
        "env": {
            "NODE_ENV": "development"
        },
        "sourceMaps": true,
        "outFiles": [
                         "$ {workspaceRoot} / dist" // Каталог выходных файлов
        ]
    }]
}

.babelrc

babel-preset-es2015

{

    «presets»: [«env»],

    «plugins»: []

}

 

BabelJS — настройка проекта с использованием Babel 7

Последняя версия Babel, 7 выпущена с изменениями в уже существующих пакетах. Часть установки остается такой же, как и для Babel 6. Единственное отличие в Babel 7 состоит в том, что все пакеты должны быть установлены с помощью @ babel / , например, @ babel / core, @ babel / preset-env, @ babel / cli, @ babel / polyfill и т. д.

Вот настройка проекта, созданная с помощью babel 7.

команда

Выполните следующую команду, чтобы начать настройку проекта —

npm init

Установите следующие пакеты

npm install --save-dev @babel/core
npm install --save-dev @babel/cli
npm install --save-dev @babel/preset-env

Вот созданный package.json —

Теперь создадим файл .babelrc в корневой папке —

Создайте папку src / и добавьте в нее файл main.js и напишите свой код для переноса в es5.

SRC / main.js

let add = (a,b) => {
   return a+b;
}

команда провозить

npx babel src/main.js --out-file main_es5.js

main_es5.js

"use strict";

var add = function add(a, b) {
   return a + b;
};

Работа Babel 7 остается такой же, как и Babel 6. Единственное отличие — установка pacakge с @babel.

В babel 7 некоторые пресеты устарели. Список выглядит следующим образом:

• Пресеты ES20xx
• столпотворение-предустановленным окр
• столпотворение-Предустановленная последняя
• Сценические пресеты в Бабеле

Также удален год из пакетов — @ babel / plugin-transform-es2015-classes теперь @ babel / plugin-transform-classes

Мы увидим еще один пример работы с машинописью и перенесем его в JavaScript Es2015 с использованием пресета машинописи и babel 7.

Для работы с машинописью нам нужно установить пакет машинописи следующим образом:

npm install --save-dev @babel/preset-typescript

Создайте файл test.ts в папке src / и напишите код в виде машинописи —

@ babel / cli · Babel

Babel поставляется со встроенным интерфейсом командной строки, который можно использовать для компиляции файлов из командной строки.

Кроме того, различные сценарии точки входа находятся в пакете верхнего уровня по адресу @ babel / cli / bin . Существует служебный сценарий, исполняемый оболочкой, babel-external-helpers.js , и основной сценарий cli Babel, babel.js .

Установить

Хотя вы, , можете установить Babel CLI глобально на свой компьютер, это намного лучше
установить локально проект за проектом.

Для этого есть две основные причины.

1. Различные проекты на одной машине могут зависеть от разных версий
   Babel позволяет обновлять их индивидуально.
2. Отсутствие неявной зависимости от среды, в которой вы работаете
   делает ваш проект более портативным и простым в настройке.

Мы можем установить Babel CLI локально, запустив:

  установка npm --save-dev @ babel / core @ babel / cli
  

Примечание: Если у вас нет пакета .7.0.0 "
}
}


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

Примечание: Пожалуйста, установите @ babel / cli и @ babel / core перед npx babel , иначе npx установит устаревшую babel 6.x. Помимо npx, вы также можете поместить его в сценарий запуска npm или вместо этого выполнить с относительным путем. ./node_modules/.bin/babel

  npx babel script.js
  

Скомпилировать файлы

Скомпилируйте файл скрипта.js и выводятся на стандартный вывод .

  npx babel script.js

  

Если вы хотите вывести в файл , вы можете использовать --out-file или -o .

  npx babel script.js --out-файл script-compiled.js
  

Чтобы компилировать файл каждый раз при его изменении , используйте параметр --watch или -w :

  npx babel script.js --watch --out-file скомпилированный по сценарию.js
  

Компиляция с исходными картами

Если вы хотите добавить файл исходной карты , вы можете использовать
- исходные карты или -s . Узнайте больше об исходных картах.

  npx babel script.js --out-file script-compiled.js --source-maps
  

Или, если вы предпочитаете встроенных исходных карт , используйте вместо него --source-maps inline .

  npx babel script.js --out-file script-compiled.js --source-maps inline
  

Каталоги компиляции

Скомпилируйте весь каталог src и выведите его в каталог lib , используя либо --out-dir , либо -d .Это не перезаписывает никакие другие файлы или каталоги в lib .

  npx babel src --out-dir lib
  

Скомпилируйте весь каталог src и выведите его как единый объединенный файл.

  npx babel src --out-file script-compiled.js
  

Игнорировать файлы

Игнорировать файлы спецификаций и тестов

  npx babel src --out-dir lib --ignore "src / ** / *. Spec.js", "src / ** / *. Test.js"
  

Копировать файлы

Копировать файлы, которые не будут компилироваться

  npx babel src --out-dir lib --copy-файлы
  

Если вы не хотите копировать игнорируемые файлы JavaScript:

История

Версия	Изменения
v7.8.0	Добавлено --copy-ignored
v7.8.4	Измените copyeIgnored option default на true , его можно отключить с помощью --no-copy-ignored

  npx babel src --out-dir lib --copy-files --no-copy-ignored
  

Файлы трубопровода

Передать файл через стандартный ввод и вывести его в script-compiled.js

  npx babel --out-file, скомпилированный по сценарию.js  

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

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

  npx babel script.js --out-file script-compiled.js --plugins = @ babel / offer-class-properties, @ babel / transform-modules-amd
  

Использование предустановок

Используйте параметр --presets , чтобы указать предустановки для использования в компиляции

  npx babel script.js --out-file script-compiled.js --presets = @ babel / preset-env, @ babel / flow
  

Игнорирование.babelrc.json или .babelrc

Игнорируйте конфигурацию из файла проекта .babelrc или .babelrc.json и используйте параметры cli, например для кастомной сборки

  npx babel --no-babelrc script.js --out-file script-compiled.js --presets = @ babel / preset-env, @ babel / preset-react
  

Путь пользовательской конфигурации

  npx babel --config-file /path/to/my/babel.config.json --out-dir dist ./src
  

Установить расширения файлов

Добавлено в: v7.8,0

По умолчанию Babel переопределяет расширение переданного файла и вместо него использует .js .

Чтобы сохранить исходное расширение файла, вы можете передать --keep-file-extension .

Вы также можете указать, какое расширение файла используется с --out-file-extension .example-extension , например babel src / lib / --out-расширение-файла .mjs .

Обратите внимание, что --keep-file-extension и --out-file-extension нельзя использовать вместе.

Расширенное использование

Доступно много других опций, см. Опции, babel --help и другие разделы для получения дополнительной информации.

Как создать пакет NPM, готовый к производству Barebones, с помощью Babel 7

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

Я хочу, чтобы мы создавали технологии, которые дольше нас самих.

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

Ой, чуть не забыл…

Вы можете отказаться от чтения всей этой статьи и просто выполнить форк github.com / Alekhurst / barebones-npm-пакет

Шаг 1. Создайте репозиторий git и npm init

Создайте новый каталог, git init it и npm init, используя следующие команды:

 mkdir barebones-npm-пакет
компакт-диск barebones-npm-пакет
git init
npm init 

На этом этапе npm init задаст вам несколько вопросов. Вот ответы, которые вы должны предоставить:

имя пакета: (barebones-npm-package) [Just Press Enter]
версия: (1.0.0) [Just Press Enter]
description: A barebones npm package [Нажмите Enter]
точка входа: (index.js) dist / index.js [Нажмите Enter]
тестовая команда: [Just Press Enter]
репозиторий git: YOUR_GIT_REPO [Нажмите Enter]
ключевые слова: лучший пакет, который когда-либо существовал [Нажмите Enter]
автор: Мастер JavaScript [Нажмите Enter]
лицензия: MIT [Нажмите Enter]
это нормально? (да) [Нажмите Enter]

Если вы наберете git status , вы должны увидеть пакет.json во вновь созданном репо.

Присоединяйтесь к обсуждению: Дискуссионная доска CyberGRX Risk Professionals

Шаг 2. Создайте каталог src

Каталог src будет местом, где мы разместим весь код, который мы на самом деле пишем. Поскольку мы будем использовать babel для его преобразования на более позднем этапе, мы можем использовать современный синтаксис JavaScript в файлах JavaScript этого каталога.

 mkdir src
cd src
сенсорный index.js 

Добавьте следующий код к вновь созданному индексу .js :

 const tellMeTheMeaningOfLife = () => {
  console.log ("Шиггиди Диггиди")
} 

 экспорт по умолчанию tellMeTheMeaningOfLife; 

Шаг 3: Добавьте babel

Теперь, когда у нас есть начальная функциональность для нашего barebones-пакета, мы хотим установить babel, настроить его для транспиляции каталога src и сохранить его вывод в каталог dist . Выполните следующую команду, чтобы добавить необходимые пакеты babel:

 npm установить @ babel / cli @ babel / core @ babel / preset-env --save-dev 

Теперь вы должны увидеть эти три пакета под devDependencies в вашем пакете .json

Шаг 4. Создайте .babelrc

Нам нужно дать babel инструкции о том, как транспилировать наш JS. Для этого создайте файл: .babelrc на верхнем уровне вашего проекта (вместе с package.json)

Добавьте следующее содержимое к вновь созданному .babelrc

 {
  "пресеты": ["@ babel / preset-env"]
} 

Шаг 5: Производственные сборки

На шаге 1 мы сказали npm установить точку входа нашего проекта на dist / index.js . Это означает, что любые проекты, использующие наш пакет, будут смотреть на dist / index.js для запуска нашего кода. Чтобы это работало, как ожидалось, нам нужно указать babel, чтобы он сохранил перенесенный вывод нашего каталога src в каталог dist .

Создайте сценарий build , добавив следующую строку кода под ключ "scripts" в строке 6 в вашем package.json . Чтобы уточнить, вставьте это после строки 6 в пакете .json и вставьте следующее:

 "build": "npx babel src --out-dir dist", 

Давайте проверим! Выполните следующую команду

 npm запустить сборку 

ПРИМЕЧАНИЕ: для работы этой команды вам потребуется глобальная установка npx … Установите npx, выполнив npm install -g npx

Теперь вы должны увидеть в своем проекте папку dist с файлом index.js , содержащим перенесенную версию нашего src / index.js код!

На этом этапе мы замкнули цикл по минимально необходимому минимуму для npm, чтобы опубликовать … но не делайте этого пока!

Шаг 6: Сборка для разработки

У нас есть babel, транслирующий наш код и записывающий вывод в dist , но мы не хотим вручную повторно запускать npm run build в разработке каждый раз, когда мы вносим изменения в наш пакет. Давайте добавим сценарий start , чтобы отслеживать изменения в src и автоматически повторно запускать транспайл при каждом изменении.

Добавьте следующую строку после сценария сборки из шага 5 в package.json

 "start": "npx babel src --watch --out-dir dist", 

Теперь запустите следующую команду

 н / мин запуск 

Каждый раз, когда вы вносите изменения в src / index.js или любые другие файлы js, которые вы добавляете в src, вы увидите изменения, отраженные в dist . Попробуйте, изменив console.log ("Shiggidy Diggidy") на console.журнал («Мемы») .

Чтобы реально работать с вашим пакетом npm, вы можете использовать https://docs.npmjs.com/cli/link между проектом, который включает ваш пакет npm, и самим пакетом.

Шаг 7: .npmignore и .gitignore

Перед тем, как опубликовать этот пакет в npm или передать его на GitHub, нам нужно создать 2 файла игнорирования:

.npmignore - сообщает npm, какие папки и файлы следует игнорировать при публикации в npm.
. Gitignore - сообщает git, какие папки и файлы следует игнорировать при нажатии на git.

На высоком уровне нам важны каталог dist в npm и каталог src в git.

Создайте файл .npmignore на верхнем уровне вашего проекта и добавьте следующее содержимое

 .DS_Store
node_modules
src 

Создайте файл .gitignore на верхнем уровне вашего проекта и добавьте следующее содержимое

 .DS_Store
node_modules
dist 

Шаг 8. Публикация пакета

После того, как вы разработали свой пакет, чтобы удовлетворить все, что вы хотите выпустить для v1.0.0 , пора его опубликовать. К счастью, это очень просто сделать, мы просто запускаем babel & npm publish. Для этого выполните следующие 2 команды:

 npm запустить сборку
npm опубликовать 

Теперь ваш пакет существует в npm, и вы можете использовать его, как любой другой пакет npm!

Продолжить чтение: Ваш выбор API может сделать или сломать вашу компанию: GraphQL против REST с точки зрения разработчиков React

Заключительные мысли и следующие шаги

Это руководство охватывает случай использования 100% barebone-систем и предназначено для того, чтобы вы могли начать работу с масштабируемым репозиторием.При этом есть еще несколько шагов, которым я хотел бы следовать при создании пакетов, таких как добавление eslint , prettier и тестов. Следите за будущими сообщениями / кодом, чтобы узнать, как лучше всего добавить их в ВАШЕ репозиторий npm.

Спасибо за чтение, и я надеюсь, что это помогло вам создать свой собственный пакет npm. Если вы застряли и хотите рабочую версию этого руководства, вот ссылка на код этого barebones-npm-package :

https://github.com/alekhurst/barebones-npm-package

… о, и если вы делаете пакет с открытым исходным кодом, я люблю вас :).

АЛЕК ХЕРСТ
ПЕРЕДНЕЕ РУКОВОДСТВО КОМАНДЫ

Оригинальная статья опубликована Алеком Херстом на Medium .

—–

Ресурсов:

Полный package.json:

 {
  "name": "barebones-npm-package",
  "версия": "1.0.0",
  "описание": "",
  "main": "src / index.js",
  "scripts": {
    "build": "npx babel src --out-dir dist",
    "start": "npx babel src --watch --out-dir dist",
    "test": "echo \" Ошибка: тест не указан \ "&& exit 1"
  },
  "репозиторий": {
    "тип": "мерзавец",
    "url": "git + https: // github.7.1.6 "
  }
} 

Полная структура проекта:

Рабочий код:
https://github.com/alekhurst/barebones-npm-package

Настройка проекта Babel

Текущие браузеры пока не поддерживают все новые функции ECMAScript 6 (также известный как ECMAScript 2015) (см. Таблицу совместимости). Вам необходимо использовать компилятор (транспилятор) для преобразования вашего кода ECMAScript 6 в код, совместимый с ECMAScript 5. Хотя есть и другие варианты, Babel стал де-факто стандартом для компиляции приложений ECMAScript 6 в версию ECMAScript, которая может работать в текущих браузерах.Babel также может компилировать другие версии ECMAScript, а также React JSX, но это выходит за рамки данного руководства.

В этом модуле вы настраиваете среду разработки для разработки и запуска приложения ECMAScript 6 с помощью Babel.

Шаг 1. Установите образец приложения

1. Клонируйте репозиторий es6-tutorial, который включает версию ECMAScript 5 ипотечного приложения, которое мы используем в этом руководстве:

     git clone https: // github.ru / ccoenraets / es6-tutorial
     

   В качестве альтернативы вы можете просто загрузить и разархивировать этот файл вместо клонирования репозитория.

2. Откройте в браузере index.html и нажмите кнопку Рассчитать .

Шаг 2. Настройка Babel

Как вы только что видели, текущая версия приложения работает в текущих браузерах без компиляции: она написана на чистом ECMAScript 5. В этом разделе мы настроили Babel, чтобы мы могли начать использовать функции ECMAScript 6 в следующем блоке.

1. Откройте командную строку и перейдите ( cd ) в каталог es6-tutorial .

2. Введите следующую команду для создания файла package.json :

     нпм инициализации
     

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

3. Введите следующую команду для установки модулей babel-cli и babel-core :

     npm установить babel-cli babel-core --save-dev
     

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

4. Введите следующую команду для установки предустановки ECMAScript 2015 :

     npm установить babel-preset-es2015 --save-dev
     

   В Babel 6 каждый трансформатор - это плагин, который можно установить отдельно. Пресет - это группа связанных плагинов. Используя предустановку, вам не нужно устанавливать и обновлять десятки плагинов по отдельности.

5. Установите http-сервер в свой проект. http-server - это легкий веб-сервер, который мы используем для локального запуска приложения во время разработки.

     npm установить http-сервер --save-dev
     

   Мы используем локальный веб-сервер, потому что некоторые части этого руководства требуют, чтобы приложение загружалось с использованием протокола http и не будет работать, если загружено с использованием протокола файла .

6. Открыть упаковку .json в вашем любимом редакторе кода. В разделе сценариев удалите сценарий test и добавьте два новых сценария: сценарий с именем babel , который компилирует main.js в версию ECMAScript, которая может работать в текущих браузерах, и сценарий с именем start который запускает локальный веб-сервер. Раздел скриптов теперь должен выглядеть так:

     "скриптов": {
       "babel": "babel --presets es2015 js / main.js -o build / main.bundle.js",
       "start": "http-сервер"
   },
     

7. В каталоге es6-tutorial создайте каталог build для размещения скомпилированной версии приложения.

Шаг 3. Сборка и запуск

1. В командной строке убедитесь, что вы находитесь в каталоге es6-tutorial , и введите следующую команду для запуска сценария babel и компиляции main.js:

     npm run babel
     

2. Откройте index.html в редакторе кода и измените тег

3. Откройте новую командную строку. Перейдите ( cd ) в каталог es6-tutorial и введите следующую команду для запуска http-сервера:

     н / мин старт
     

   Если порт 8080 уже используется на вашем компьютере, измените сценарий start в package.json и укажите порт, доступный на вашем компьютере.Например:

     "скриптов": {
       "babel": "babel --presets es2015 js / main.js -o build / main.bundle.js",
       "start": "http-server -p 9000"
   },
     

4. Откройте браузер и перейдите по адресу http: // localhost: 8080

5. Нажмите кнопку Рассчитать , чтобы рассчитать ежемесячный платеж по ипотеке.

6. Откройте build / main.bundle.js в редакторе кода и обратите внимание, что сгенерированный код практически идентичен исходному коду ( js / main.js ). Это связано с тем, что текущий код в main.js не включает никаких функций ECMAScript 6. С такой настройкой мы готовы приступить к использованию функций ECMAScript 6 в следующем блоке.

Дополнительные ресурсы

babel / babel: 🐠 Babel - компилятор для написания JavaScript нового поколения.

Компилятор для написания JavaScript нового поколения.

Поддержка Babel

Babel (произносится как «болтовня») - это управляемый сообществом проект, который используется многими компаниями и проектами и поддерживается группой добровольцев.Если вы хотите помочь поддержать будущее проекта, пожалуйста, обратите внимание:

• Предоставление разработчикам времени на проект. (Напишите нам в Twitter или Slack, чтобы получить рекомендации!)
• Предоставление средств, став спонсором Open Collective или GitHub (который поступает на наш счет Open Collective)!

Спонсоры

Наши лучшие спонсоры показаны ниже! [Стать спонсором]

Введение

Babel - это инструмент, который помогает писать код на последней версии JavaScript.Если ваши поддерживаемые среды не поддерживают определенные функции изначально, Babel поможет вам скомпилировать эти функции до поддерживаемой версии.

В

 // ES2020 нулевое слияние
function greet (input) {
  вернуть ввод ?? "Привет, мир";
} 

Из

 function greet (ввод) {
  вернуть ввод! = ноль? ввод: «Привет, мир»;
} 

Попробуйте на нашем REPL.

FAQ

Кто поддерживает Вавилон?

В основном горстка добровольцев, финансируемых вами! Посетите страницу нашей команды!

Есть ли вавилонская песня?

Я так рад, что вы спросили: Аллилуйя —— Во славу Вавилона от @ angus-c, аудиоверсия от @swyx.Напишите нам свои записи в Твиттере!

Ищете поддержку?

Для вопросов и поддержки присоединяйтесь к нашему сообществу Slack (вы можете зарегистрироваться здесь, чтобы получить приглашение), задайте вопрос на Stack Overflow или напишите нам в Twitter.

Где документы?

Посетите наш веб-сайт: babeljs.io и сообщайте о проблемах / функциях на babel / website.

Хотите сообщить об ошибке или запросить функцию?

Пожалуйста, прочтите наш CONTRIBUTING.md и заполните шаблон задачи на babel / issues!

Хотите внести свой вклад в Babel?

Выезд:

• Наш канал #development Slack и привет! (регистрация)
• Проблемы с хорошим первым номером и ярлыком «Требуется помощь».Мы предлагаем также взглянуть на закрытые, чтобы понять, какие проблемы вы можете решить.

Некоторые ресурсы:

• Наш CONTRIBUTING.md, чтобы начать настройку репо.
• Наши обсуждения / заметки / дорожная карта: babel / notes
• Наш прогресс по предложениям TC39: babel / предложения
• Наш блог, содержащий сообщения о выпуске и пояснения: / blog
• Наша страница видео с разговорами об открытых источниках и Babel: / videos
• Наш подкаст

Как структурировано репо?

Репо Babel управляется как монорепозиторий, состоящий из множества пакетов npm.

Лицензия

MIT

Инфраструктура JavaScript

: CLI, NPM, Babel и Webpack

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

Вы должны тратить время и усилия на изучение, понимание, запоминание и применение новых знаний. Здесь нет кратчайшего пути.

Но хороший курс может показать лучший маршрут и помочь избежать ловушек и объездов. Вы можете достичь максимальной продуктивности, потратив свое время и усилия.

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

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

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

Даже если у вас есть вопросы, которые вы не можете решить, просто разместите их в stackoverflow, и вы получите ответы в течение нескольких минут.

Имея все бесплатные учебные материалы и учителей, какой смысл в создании этого платного онлайн-курса?

Это зависит от того, чего вы действительно хотите.

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

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

Мы считаем, что хороший онлайн-курс также должен быть навигатором, а не только объяснять концепции кодирования.

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

Почему мы выделяем реальное направление ?

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

Это похоже на гоночную игру на телефоне, это определенно не то же самое, что вождение настоящей машины по реальной трассе.

Например, в нашем уроке PHP мы научим вас, как создать программу загрузки.

Мы видели книги и курсы, в которых учат только загружать файлы.

Если запустить эту программу в реальной жизни, она не протянет и дня. Это принесет больше вреда, чем пользы.

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

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

Загруженные файлы должны быть правильно переименованы и сохранены. Самое главное, этот процесс должен быть автоматическим.

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

Если один шаг пропущен, ваша программа загрузки не выдержит реальной жизненной среды.

Вот почему мы делаем акцент на реальном пункте назначения. Мы хотим показать вам всю картину целиком, а не только ее фрагмент.

Знание всей картины - вот что отличает заслуживающего доверия профессионального программиста от любителя кодирования.

Судя по всему, дорога к настоящему месту назначения довольно длинная.

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

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

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

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

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

Итак, как решить эту проблему?

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

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

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

Самая большая карточка в нашем рукаве - это таблица содержимого.

Вам может показаться, что здесь начинается урок по программе загрузки.Но на самом деле наш урок загрузки начался задолго до этого. Мы начали закладывать основы для вас, так как мы учим вас создавать детектор типов файлов.

Мы разделяем сложную программу на компоненты и добавляем только один компонент за раз. Что наиболее важно, каждый раз, когда мы добавляем новый компонент, мы снова пересматриваем предыдущие компоненты.

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

Настройка React с webpack 3, babel и NPM

Несколько лет назад jQuery был лучшей практикой для разработки Javascript / внешнего интерфейса.Начать работу с jQuery было так же просто, как создать документ index.html, включить jQuery и начать писать код.

Сегодня интерфейсная экосистема эволюционировала. Чтобы начать работу с React, вам нужно изучить и настроить NPM, webpack, babel И React.

Это ошеломляюще - узнать столько новых технологий одновременно. А когда вы разговариваете с людьми и читаете о webpack / babel, у вас складывается впечатление, что это сложно.

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

Что мы будем делать

Мы собираемся создать простой проект React с нуля, используя следующие инструменты:

• webpack 3 для сборки
• babel для транспиляции React и ES6
• npm для запуска приложения и управления зависимостями

Даже несмотря на то, что наша установка проста, она будет готовой к работе.

А как насчет CRA?

Вы, наверное, слышали о create-react-app (CRA), которое является официальным инструментом для запуска нового проекта React.Для новичков рекомендуется использовать CRA, но есть много причин для настройки собственной сборки с помощью webpack / babel / NPM:

1. CRA поддерживает извлечение, что дает вам сгенерированную конфигурацию веб-пакета, которую вы можете редактировать. Он хорошо документирован, но в любом случае может быть довольно сложным началом изучения веб-пакета. Лично я лучше всего учусь кодировать с нуля!
2. Основными технологиями CRA являются webpack / babel / NPM. Чтобы освоить React, вам нужно знать, как он работает изнутри.
3. CRA не поддерживает создание приложения с более продвинутыми функциями, такими как рендеринг на стороне сервера. Вам нужно либо «выбросить» из CRA, либо настроить проект с нуля.

Создать новый проект NPM

Начнем с создания нового проекта NPM:

  mkdir реактивный стартер
CD React-Starter
npm init  

npm init задаст вам кучу вопросов. Просто нажмите Enter для значений по умолчанию. Если вы хотите, вы можете позже изменить конфигурацию, которую он генерирует, отредактировав пакет .json , созданный этой командой.

Создать файл исходного кода JavaScript

Далее мы собираемся создать наше минимальное приложение React и HTML-файл.

  импортировать React из "react";
импортировать ReactDOM из "react-dom";

class HelloMessage расширяет React.Component {
  оказывать() {
    return 
 Здравствуйте, {this.props.name} 
;
  }
}

var mountNode = document.getElementById ("приложение");
ReactDOM.render (, mountNode);  

src / app.js

dist / index.html

Мы создали два каталога: src и dist.

• src - это каталог, в котором будут находиться наши исходные файлы
• dist - это каталог, в котором мы настроим webpack для размещения скомпилированных файлов JavaScript.Чтобы не усложнять задачу, мы поместили файл index.html прямо в папку dist , поскольку он статичен и не требует передачи через webpack.

Создайте файл конфигурации webpack 3

Наш файл конфигурации webpack выглядит так:

  const webpack = require ('webpack');
const path = require ('путь');

const config = {
    запись: './src/app.js',
    выход: {
        путь: path.resolve (__ dirname, 'dist'),
        имя файла: 'bundle.js'
    },
    модуль: {
        правила: [
            {
                тестовое задание: /\.(js | jsx) $ /,
                исключить: / node_modules /,
                использование: 'babel-loader'
            }
        ]
    }
};
module.exports = config;  

webpack.config.js

Он содержит следующее:

1. Файл src / app.js , который мы создали ранее, является точкой входа
2. Файл dist / bundle.js является выходным файлом.
3. В разделе модулей описывается, как веб-пакет должен преобразовывать код. Он использует babel-загрузчик для всех файлов, у которых есть .js или расширение .jsx . На следующем этапе мы настроим babel-loader .

Добавить конфигурацию babel

Babel - это инструмент с широкими возможностями настройки для транспиляции JavaScript. Мы собираемся использовать подмножество функций babels: транспиляцию ES6 и React JSX.

Наша конфигурация webpack использует babel-loader для запуска babel, который использует обычный файл конфигурации babel.

Настраиваем babel вот так в файле .babelrc :

  {
  "пресеты": ["es2015", "реагировать"]
}  

.babelrc

Теперь у нас есть все необходимые файлы

Это обзор созданных нами файлов и папок:

 .
├── package.json
├── расстояние
│ └── index.html
├── src
│ └── app.js
└── webpack.config.js

2 каталога, 4 файла  

Добавить зависимости

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

  npm install --save-dev webpack
npm install --save-dev babel-loader
npm install --save-dev babel-core
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react
npm install --save реагировать
npm install --save react-dom  

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

Беги

Мы собираемся использовать NPM, чтобы начать сборку с помощью webpack. Добавьте это в область сценария в package.json:

  "скриптов": {
    "dist": "webpack -p"
  },  

Давайте запустим и посмотрим, что произойдет:

Работает!

Теперь откройте в браузере файл index.html . Если вы используете Mac, вы можете сделать это с помощью этой команды: open dist / index.html

Теперь мы видим «Привет, Джейн» в браузере.Он визуализируется через React и создается с помощью webpack / babel! Приятно иметь 100% контроль над созданием приложения!

Что дальше

Следующим шагом является добавление стилей, служебных библиотек и т. Д. В вашу сборку webpack. Я создал инструмент для автоматического создания конфигурации веб-пакета в зависимости от ваших конкретных потребностей: https://createapp.dev/

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

Устали копировать / вставлять? Получите полный код этого руководства, подписавшись ниже.

Установка

React, Часть II: Babel

Фон

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

Установить Babel

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

Babel - модуль npm babel-core .Вы собираетесь установить babel-core немного иначе, чем вы установили react и react-dom . Вместо npm install --save babel-core вы будете использовать команду npm install --save-dev babel-core .

Это связано с тем, что вы будете использовать Babel только в режиме разработки . Когда приложение React отправляется в производство, ему больше не нужно выполнять преобразования: преобразования будут жестко запрограммированы на месте.Флаг --save-dev сохраняет модуль npm только для разрабатываемой версии.

Так же, как --save можно сократить до -S , --save-dev можно сократить до -D .

Вы также собираетесь установить два других модуля, связанных с babel, с именами babel-loader и babel-preset-react соответственно. Мы скоро объясним это!

Используйте одну из этих команд терминала для установки babel-core , babel-loader и babel-preset-react :

Настроить Babel

Для того, чтобы Babel работал, вам нужно написать файл конфигурации babel .

В корневом каталоге создайте новый файл с именем .