js_environment_course v1.0.0

Babel settings

Install babel

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

Settings You need to create a file for babel config babel.config.js \ It's for support broadcast code

Different runtime environments support (or doesn't support) different possibilities and syntactic language constructions. In the property targets lists the specific environments (and their versions) for which writing code. If the code is intended to be executed in nodejs, then just need to specify it. In this case babel will be broadcast constructions, supported in nodejs, and nothing more.

module.exports = {
  presets: [
    ['@babel/env', {
      targets: {
        node: 'current',
        firefox: '60',
        chrome: '67',
        safari: '11.1',
      },
    }],
  ],
};

Using

In usually the source code is store in the directory src The command babel represent package @babel/cli \ npx babel src --out-dir dist

Russian lang \ Есть только один маленький нюанс. Изначально я сказал, что NPM никак не интегрирован с Git, но это не совсем правда. По умолчанию NPM смотрит в файл .gitignore. Все, что там перечислено, не попадет в NPM-репозиторий при публикации пакета. В нашем случае такой директорией является dist, но именно ее мы и хотим опубликовать. Выходов из этой ситуации несколько. Один связан с файлом .npmignore и описан в документации, про другой я скажу подробнее. NPM позволяет указать список файлов и папок, которые нужно опубликовать. Достаточно добавить секцию files в package.json. Содержимое files — массив директорий и файлов:

"files": [
  "dist"
]

Существует два способа подготовки пакета к публикации. Первый подход заключается в том, чтобы перед выполнением npm publish вручную сгенерировать каталог dist, используя скрипты: npx babel src --out-dir dist. Подход рабочий, но сопряжён с постоянными ошибками в стиле "ой, забыл собрать новый код". К тому же, это действие может быть автоматизировано — именно эту идею и реализует второй подход. NPM содержит множество предопределённых скриптов, которые выполняются автоматически в определённые этапы работы. Например, prepublishOnly запускается перед непосредственным выполнением публикации. То, что нам и требуется.

"scripts": {
  "build": "NODE_ENV=production babel src --out-dir dist",
  "prepublishOnly": "npm run build"
}

Если у вас Windows, вам понадобится утилита cross-env.

В примере выше используется небольшой трюк. В prepublishOnly вызывается другой скрипт — build. Этот приём используется широко, и он действительно удобен. Бывают ситуации, когда все же нужно запускать сборку руками. Поэтому удобно иметь отдельную команду только для генерации. Скрипт build как раз и призван решить эту задачу.

Подчеркну еще раз: каталог dist не должен храниться в git-репозитории, и вы не найдете его на Гитхабе. Посмотрите lodash. Он генерируется только в момент публикации пакета и заливается в npm-репозиторий. Каждая новая публикация должна генерировать этот каталог заново. Только в этом случае обновится код в пакете.

Подведём итог. В git-репозитории хранится исходный код, ещё не обработанный babel. Это значит, что вы всегда можете найти библиотеку и изучить её содержимое на github. А вот пакет, установленный к вам в систему содержит обработанный код, предназначенный для запуска, а не для чтения. Этот код не хранится в git-репозитории. Он попадает в NPM-репозиторий в момент публикации новой версии пакета за счет выполнения команды prepublishOnly (в которую вы сами должны прописать вызов трансляции).

Babel-node При использовании новых возможностей js, запуск кода на выполнение node file.js, упадет с ошибкой, потому что внутри файла используется синтаксис, который нода не понимает. Для запуска кода после каждого изменения, необходимо выполнять трансляцию. Этот процесс выглядит так:

Делаем изменение. Транслируем код с помощью Babel. Запускаем на выполнение. Разработчики Babel предусмотрели эту ситуацию. В этом случае можно установить пакет @babel/node. Теперь код можно вызывать так: npx babel-node src/index.js. Команда babel-node делает одновременно две вещи. Транслирует код и сразу же запускает его на выполнение. В отличие от команды babel, babel-node не сохраняет результат трансляции. Все происходит во время работы в памяти. Обратите внимание на то, что вам все равно понадобится правильно настроенный файл babel.config.js в корне проекта иначе babel-node не сможет произвести трансляцию и так же завершится с ошибкой синтаксиса на момент запуска.

#Source Map Babel поддерживает source map из коробки. Для его генерации достаточно добавить флаг --source-maps в процесс компиляции:

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

После выполнения этой команды в конце транслированных файлов появится source map в виде комментария. Однако, если речь идет про Node.js (а не браузер), то этого недостаточно. На текущий момент Node.js не имеет встроенной поддержки source map, поэтому даже если вы их сгенерировали, нода никак не отреагирует на их наличие. Их поддержку можно добавить с помощью npm пакета https://github.com/evanw/node-source-map-support.