Babelrc что это
Перейти к содержимому

Babelrc что это

  • автор:

Конфигурирование Babel

Babel автоматически конфигурируется для всех файлов .js и .jsx через babel-loader с благоразумными значениями по умолчанию (например, с @babel/preset-env и @babel/preset-react , по запросу).

Вам нужно ещё больше расширить конфигурацию Babel? Самый лёгкий способ сделать это — через configureBabel() :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
// webpack.config.js // . Encore // . .configureBabel(function(babelConfig) < // добавить дополнительные пресеты babelConfig.presets.push('@babel/preset-flow'); // по умолчанию плагины не добавляются, но вы можете их добавить babelConfig.plugins.push('styled-jsx/babel'); >, < // node_modules не обрабатывается через Babel по умолчанию, // но вы можете позволить обработку каких-то конкретных модулей includeNodeModules: ['foundation-sites'], // или полностью контролировать правило исключения (заметьте, что вы не // можете использовать "includeNodeModules" и "exclude" одновременно) exclude: /bower_components/ >) ;

Конфигурация целей браузера

Пресет @babel/preset-env переписывает ваш JavaScript, чтобы финальный синтаксис работал в любом браузере, который вы захотите. Чтобы сконфигурировать браузеры, которые вам нужно поддерживать, см. PostCSS и автоматическое добавление префиксов (postcss-loader).

После изменения вашей конфигурации «browserslist», вам понадобится вручную удалить каталог кеша babel:

# В Unix запустите эту команду. В Windows, очистите этот каталог вручную $ rm -rf node_modules/.cache/babel-loader/

Создание файла .babelrc

Вместо того, чтобы вызывать configureBabel() , вы можете создать файл .babelrc в корне вашего проекта. Это более «стандартный» способ конфигурации Babel, но у него есть недостатки: как только появляется файл .babelrc , Encore больше не может добавлять никакую конфигурацию Babel для вас. Например, если вы вызовете Encore.enableReactPreset() , предустановка react не будет автоматически добавлена в Babel: вы должны будете добавить её сами в .babelrc .

Как только файл .babelrc будет существовать, он будет главенствовать над конфигурацией Babel, добавленной Encore.

Symfony is a trademark of Symfony SAS. Переклад — Playtini. UA RU RU EN

Использование Babel и Webpack для настройки React-проекта с нуля

Существует немало инструментов, позволяющих подготовить среду для React-разработки. Например, в наших материалах учебного курса по React используется средство create-react-app, позволяющее создать шаблонный проект, содержащий всё необходимое для разработки React-приложений. Автор статьи, перевод которой мы публикуем сегодня, хочет рассказать о том, как самостоятельно настроить окружение для разработки React-проектов с использованием Babel и Webpack. Эти инструменты используются и в проектах, создаваемых средствами create-react-app, и мы полагаем, что всем, кто изучает React-разработку, интересно будет познакомиться с ними и с методикой создания React-проектов на более глубоком уровне. А именно, речь пойдёт о том, как сконфигурировать Webpack таким образом, чтобы это средство использовало бы Babel для компиляции JSX-кода в JavaScript-код, и как настроить сервер, используемый при разработке React-проектов.

Webpack

Webpack используется для компиляции JavaScript-модулей. Этот инструмент часто называют «бандлером» (от bundler) или «сборщиком модулей». После его установки работать с ним можно, используя интерфейс командной строки или его API. Если вы не знакомы с Webpack — рекомендуется почитать об основных принципах его работы и посмотреть его сравнение с другими сборщиками модулей. Вот как, на высоком уровне, выглядит то, что делает Webpack.

Работа Webpack

Webpack берёт всё, от чего зависит проект, и преобразует это в статические ресурсы, которые могут быть переданы клиенту. Упаковка приложений — это очень важно, так как большинство браузеров ограничивает возможности по одновременной загрузке ресурсов. Кроме того, это позволяет экономить трафик, отправляя клиенту лишь то, что ему нужно. В частности, Webpack использует внутренний кэш, благодаря чему модули загружаются на клиент лишь один раз, что, в итоге, приводит к ускорению загрузки сайтов.

Babel

Babel — это транспилятор, который, в основном, используется для преобразования конструкций, принятых в свежих версиях стандарта ECMAScript, в вид, понятный как современным, так и не самым новым браузерам и другим средам, в которых может выполняться JavaScript. Babel, кроме того, умеет преобразовывать в JavaScript и JSX-код, используя @babel/preset-react.

Именно благодаря Babel мы, при разработке React-приложений, можем пользоваться JSX. Например, вот код, в котором используется JSX:

import React from "react"; function App() < return( 
Hello world!
) > export default App;

Выглядит такой код аккуратно, он понятен, его легко читать и редактировать. Глядя на него, сразу можно понять, что он описывает компонент, возвращающий элемент , в котором содержится текст Hello world! , выделенный жирным шрифтом. А вот пример кода, делающего то же самое, в котором JSX не используется:

"use strict"; Object.defineProperty(exports, "__esModule", < value: true >); var _react = require("react"); var _react2 = _interopRequireDefault(_react); function _interopRequireDefault(obj) < return obj && obj.__esModule ? obj : < default: obj >; > function App(props) < return _react2.default.createElement( "div", null, _react2.default.createElement( "b", null, "Hello world!" ) ); >exports.default = App;

Преимущества первого примера перед вторым очевидны.

Предварительные требования

Для того чтобы настроить проект React-приложения, нам понадобятся следующие npm-модули.

  • react — библиотека React.
  • react-dom — библиотека, которая поможет нам использовать возможности React в браузере.
  • babel/core — транспиляция JSX в JS.
  • babel/preset-env — создание кода, подходящего для старых браузеров.
  • babel/preset-react — настройка транспилятора для работы с React-кодом.
  • babel-loader — настройка Webpack для работы с Babel.
  • css-loader — настройка Webpack для работы с CSS.
  • webpack — сборка модулей.
  • webpack-cli — работа с Webpack из командной строки.
  • style-loader — загрузка всего используемого CSS-кода в заголовке HTML-файла.
  • webpack-dev-server — настройка сервера разработки.
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader webpack webpack-cli style-loader webpack-dev-server

Точкой входа в программу будет файл index.js , который содержится в папке src , находящейся в корневой директории проекта. Ниже показана структура этого проекта. Некоторые файлы и папки создаются автоматически, некоторые вам нужно будет создать самостоятельно.

Структура проекта

Готовый проект, которым мы будем здесь заниматься, можно найти в этом репозитории.

Папка component будет содержать компоненты проекта (в нашем случае тут присутствует лишь один компонент). В папке dist , в файле main.js , будет находиться скомпилированный код, а index.html — это, как уже было сказано, главный HTML-файл нашего приложения.

Настройка Webpack

Webpack можно настраивать разными способами. В частности, настройки этого инструмента могут принимать вид аргументов командной строки или присутствовать в проекте в виде конфигурационного файла с именем webpack.config.js . В нём нужно описать и экспортировать объект, содержащий настройки. Мы начнём настройку этого файла с описания объекта, выглядящего так (мы будем рассматривать его по частям, а ниже приведём его полный код):

Свойство entry задаёт главный файл с исходным кодом проекта. Значение свойства mode указывает на тип окружения для компиляции (в нашем случае это окружение разработки — development ) и на то, куда нужно поместить скомпилированный файл.

Работа над проектом

Поместим в файл index.html нашего проекта, расположенный в папке dist , следующий код:

    React From Scratch   

Обратите внимание на тег script , присутствующий в этом файле. Он указывает на файл main.js , который будет получен в ходе компиляции проекта. Элемент с идентификатором root мы будем использовать для вывода React-приложения.

Теперь установим пакеты react и react-dom:

npm install react react-dom

Внесём в index.js следующий код:

import React, < Component >from "react"; import ReactDOM from "react-dom"; import App from "./component/app.component"; ReactDOM.render(, document.querySelector("#root"));

Это — стандартный код для подобных файлов React-приложений. Тут мы подключаем библиотеки, подключаем файл компонента и выводим приложение в тег с идентификатором root .

Вот код файла app.component.js :

import React, < Component >from "react"; import s from "./app.component.css"; class MyComponent extends Component < render() < return 
>Hello World
; > > export default MyComponent;

Вот код файла app.component.css :

.intro

Настройка Babel

Babel — это транспилятор, обладающий огромными возможностями. В частности, он умеет преобразовывать LESS в CSS, JSX в JS, TypeScript в JS. Мы будем использовать с ним лишь две конфигурации — react и env (их ещё называют «пресетами»). Babel можно настраивать по-разному, в частности, речь идёт о средствах командной строки, о специальном файле с настройками, о стандартном файле package.json . Нас устроит последний вариант. Добавим в package.json следующий раздел:

"babel": < "presets": [ "@babel/env", "@babel/react" ] >

Благодаря этим настройкам Babel будет знать о том, какие пресеты ему нужно использовать. Теперь настроим Webpack на использование Babel.

Настройка Webpack на работу с Babel

Тут мы воспользуемся библиотекой babel-loader, которая позволит использовать Babel с Webpack. Фактически, речь идёт о том, что Babel сможет перехватывать и обрабатывать файлы до их обработки Webpack.

▍JS-файлы

Вот правила, касающиеся работы с JS-файлами (этот код пойдёт в файл webpack.config.js ), они представляют собой одно из свойств объекта с настройками, экспортируемого этим файлом:

module: < rules: [ < test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: < loader: "babel-loader" >>, ] >

В свойстве rules представленного здесь объекта хранится массив правил, в соответствии с которыми должен быть обработан файл, заданный регулярным выражением, описанным в свойстве test . В данном случае правило будет применяться ко всем файлам с расширениями .m и .js , при этом файлы из папок node_modules и bower_components мы транспилировать не хотим. Далее, тут мы указываем, что мы хотим пользоваться babel-loader. После этого наши JS-файлы будут сначала обрабатываться средствами Babel, а потом упаковываться с помощью Webpack.

▍CSS-файлы

Добавим в массив rules объекта module настройки для обработки CSS-файлов:

module: < rules: [ < test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: < loader: "babel-loader" >>, < test: /\.css$/, use: [ "style-loader", < loader: "css-loader", options: < modules: true >> ] >, ] >

Задачу обработки CSS-файлов мы будем решать средствами style-loader и css-loader. Свойство use может принимать массив объектов или строк. Загрузчики вызываются, начиная с последнего, поэтому наши файлы сначала будут обработаны с помощью css-loader. Мы настроили это средство, записав в свойство modules объекта options значение true . Благодаря этому CSS-стили будут применяться лишь к тем компонентам, в которые они импортированы. Css-loader разрешит команды импорта в CSS-файлах, после чего style-loader добавит то, что получится, в форме тега style , в разделе страницы:

▍Статические ресурсы

Продолжим работу над объектом настроек module , описав в нём правила обработки статических ресурсов:

module: < rules: [ < test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: < loader: "babel-loader" >>, < test: /\.css$/, use: [ "style-loader", < loader: "css-loader", options: < modules: true >> ] >, < test: /\.(png|svg|jpg|gif)$/, use: ["file-loader"] >] >

Если система встретит файл с расширением PNG, SVG, JPG или GIF, то для обработки такого файла будет использован file-loader. Обработка таких файлов важна для правильной подготовки и оптимизации проекта.

Настройка сервера разработки

Теперь, в файле webpack.config.js , настроим сервер разработки:

devServer: < contentBase: path.join(__dirname, "dist"), compress: true, port: 9000, watchContentBase: true, progress: true >,

Свойство contentBase объекта с настройками devServer указывает на папку, в которой расположены наши ресурсы и файл index.html . Свойство port позволяет задать порт, который будет прослушивать сервер. Свойство watchContentBase позволяет реализовать наблюдение за изменениями файлов в папке, задаваемой свойством contentBase .

Вот полный код файла webpack.config.js :

const path = require("path"); module.exports = < entry: "./src/index.js", mode: "development", output: < filename: "./main.js" >, devServer: < contentBase: path.join(__dirname, "dist"), compress: true, port: 9000, watchContentBase: true, progress: true >, module: < rules: [ < test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: < loader: "babel-loader" >>, < test: /\.css$/, use: [ "style-loader", < loader: "css-loader", options: < modules: true >> ] >, < test: /\.(png|svg|jpg|gif)$/, use: ["file-loader"] >] > >;

Теперь внесём в package.json , в раздел scripts , команду для запуска сервера разработки и команду для запуска сборки проекта:

"scripts": < "dev": "webpack-dev-server", "start": "webpack" >,

Сейчас всё готово к тому, чтобы запустить сервер разработки следующей командой:

npm run dev

Если теперь перейти по адресу http://localhost:9000, можно будет увидеть страницу нашего проекта.

Страница проекта в браузере

Для того чтобы собрать проект воспользуйтесь следующей командой:

npm run start

После этого можно будет открыть файл index.html в браузере и увидеть то же самое, что можно было видеть, запустив сервер разработки и перейдя по адресу http://localhost:9000.

Итоги

В этом материале приведён обзор настройки Webpack и Babel для их использования в React-проектах. На самом деле, на той базе, которую мы сегодня разобрали, можно создавать гораздо более сложные конфигурации. Например, вместо CSS можно воспользоваться LESS, вместо обычного JS писать на TypeScript. При необходимости можно, например, настроить минификацию файлов и многое другое. Конечно, если сегодня состоялось ваше первое знакомство с процессом самостоятельной настройки React-проектов, вам может показаться, что всё это очень сложно и куда легче воспользоваться готовым шаблоном. Однако после того, как вы немного в этом разберётесь, вы поймёте, что некоторое увеличение сложности настроек даёт вам большую свободу, позволяя настраивать свои проекты именно так, как вам это нужно, не полагаясь полностью на некие «стандартные» решения и снизив свою зависимость от них.

Уважаемые читатели! Какой подход вы чаще всего используете при подготовке рабочей среды для React-проектов?

What is Babel?

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you:

  • Transform syntax
  • Polyfill features that are missing in your target environment (through a third-party polyfill such as core-js)
  • Source code transformations (codemods)
  • And more! (check out these videos for inspiration)

JavaScript

// Babel Input: ES2015 arrow function [1, 2, 3].map(n => n + 1);  // Babel Output: ES5 equivalent [1, 2, 3].map(function(n)   return n + 1; >); 

For an awesome tutorial on compilers, check out the-super-tiny-compiler, which also explains how Babel itself works on a high level.

ES2015 and beyond​

Babel has support for the latest version of JavaScript through syntax transformers.

These plugins allow you to use new syntax, right now without waiting for browser support. Check out our usage guide to get started.

JSX and React​

Babel can convert JSX syntax! Check out our React preset to get started. Use it together with the babel-sublime package to bring syntax highlighting to a whole new level.

You can install this preset with

npm install --save-dev @babel/preset-react 
yarn add --dev @babel/preset-react 
pnpm add --save-dev @babel/preset-react 

and add @babel/preset-react to your Babel configuration.

export default function DiceRoll()  const getRandomNumber = () =>   return Math.ceil(Math.random() * 6); >;  const [num, setNum] = useState(getRandomNumber());  const handleClick = () =>   const newNum = getRandomNumber(); setNum(newNum); >;  return ( div>  Your dice roll: num>. button onClick=handleClick>>Click to get a new numberbutton> div> ); >; 

Learn more about JSX

Type Annotations (Flow and TypeScript)​

Babel can strip out type annotations! Check out either our Flow preset or TypeScript preset to get started. Keep in mind that Babel doesn’t do type checking; you’ll still have to install and use Flow or TypeScript to check types.

You can install the flow preset with

npm install --save-dev @babel/preset-flow 
yarn add --dev @babel/preset-flow 
pnpm add --save-dev @babel/preset-flow 

JavaScript

// @flow function square(n: number): number   return n * n; > 

or the typescript preset with

npm install --save-dev @babel/preset-typescript 
yarn add --dev @babel/preset-typescript 
pnpm add --save-dev @babel/preset-typescript 

JavaScript

function Greeter(greeting: string)   this.greeting = greeting; > 

Learn more about Flow and TypeScript!

Pluggable​

Babel is built out of plugins. Compose your own transformation pipeline using existing plugins or write your own. Easily use a set of plugins by using or creating a preset. Learn more →

Create a plugin on the fly with astexplorer.net or use generator-babel-plugin to generate a plugin template.

example-babel-plugin.js

// A plugin is just a function export default function( types: t >)   return   visitor:   Identifier(path)   let name = path.node.name; // reverse the name: JavaScript -> tpircSavaJ  path.node.name = [. name] .reverse() .join(""); >, >, >; > 

Debuggable​

Source map support so you can debug your compiled code with ease.

Spec Compliant​

Babel tries to stay true to the ECMAScript standard, as much as reasonably possible. It may also have specific options to be more spec compliant as a tradeoff to performance.

Compact​

Babel tries using the least amount of code possible with no dependence on a bulky runtime.

This may be difficult to do in cases, and there are «assumptions» options that tradeoff spec compliancy for readability, file size, and speed.

@babel/preset-env

@babel/preset-env is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). This both makes your life easier and JavaScript bundles smaller!

Install​

npm install --save-dev @babel/preset-env 
yarn add --dev @babel/preset-env 
pnpm add --save-dev @babel/preset-env 

How Does it Work?​

@babel/preset-env would not be possible if not for a number of awesome open-source projects, like browserslist , compat-table , and electron-to-chromium .

We leverage these data sources to maintain mappings of which version of our supported target environments gained support of a JavaScript syntax or browser feature, as well as a mapping of those syntaxes and features to Babel transform plugins and core-js polyfills.

@babel/preset-env won’t include any JavaScript syntax proposals less than Stage 3 because at that stage in the TC39 process, it wouldn’t be implemented by any browsers anyway. Those would need to be included manually. The shippedProposals option will include Stage 3 proposals that some browsers have already implemented.

@babel/preset-env takes any target environments you’ve specified and checks them against its mappings to compile a list of plugins and passes it to Babel.

Browserslist Integration​

For browser- or Electron-based projects, we recommend using a .browserslistrc file to specify targets. You may already have this configuration file as it is used by many tools in the ecosystem, like autoprefixer, stylelint, eslint-plugin-compat and many others.

By default @babel/preset-env will use browserslist config sources unless either the targets or ignoreBrowserslistConfig options are set.

If you are relying on browserslist’s defaults query (either explicitly or by having no browserslist config), you will want to check out the No targets section for information on preset-env’s behavior.

For example, to only include polyfills and code transforms needed for users whose browsers have >0.25% market share (ignoring browsers without security updates like IE 10 and BlackBerry):

babel.config.json

  "presets": [ [ "@babel/preset-env",   "useBuiltIns": "entry", "corejs": "3.22" > ] ] > 

.browserslistrc

> 0.25% not dead 

package.json

 "browserslist": "> 0.25%, not dead" > 

Please note that since v7.4.5 the browserslist query is resolved with mobileToDesktop: true . For example, if you want to create a snapshot of a query run npx browserslist —mobile-to-desktop «>0.25%, not dead» .

Options​

For more information on setting options for a preset, refer to the preset options documentation.

targets ​

string | Array | < [string]: string >, defaults to the top-level targets option if no browserslist-related option is specified in @babel/preset-env ‘s docs, otherwise to <> .

For usage, refer to the targets option documentation.

bugfixes ​

boolean , defaults to false .

This option will be enabled by default in Babel 8.

By default, @babel/preset-env (and Babel plugins in general) grouped ECMAScript syntax features into collections of closely related smaller features. These groups can be large and include a lot of edge cases, for example «function arguments» includes destructured, default and rest parameters. From this grouping information, Babel enables or disables each group based on the browser support target you specify to @babel/preset-env ’s targets option.

When this option is enabled, @babel/preset-env tries to compile the broken syntax to the closest non-broken modern syntax supported by your target browsers. Depending on your targets and on how many modern syntax you are using, this can lead to a significant size reduction in the compiled app. This option merges the features of @babel/preset-modules without having to use another preset.

spec ​

boolean , defaults to false .

Enable more spec compliant, but potentially slower, transformations for any plugins in this preset that support them.

Consider migrating to the top level assumptions available since Babel 7.13. See «Migrating from @babel/preset-env ‘s «loose» and «spec» modes» for the equivalent assumptions-based configuration, ready to be copied and pasted as a starting point.

loose ​

boolean , defaults to false .

Enable «loose» transformations for any plugins in this preset that allow them.

Consider migrating to the top level assumptions available since Babel 7.13. See «Migrating from @babel/preset-env ‘s «loose» and «spec» modes» for the equivalent assumptions-based configuration, ready to be copied and pasted as a starting point.

modules ​

«amd» | «umd» | «systemjs» | «commonjs» | «cjs» | «auto» | false , defaults to «auto» .

Enable transformation of ES module syntax to another module type. Note that cjs is just an alias for commonjs .

Setting this to false will preserve ES modules. Use this only if you intend to ship native ES Modules to browsers. If you are using a bundler with Babel, the default modules: «auto» is always preferred.

modules: «auto» ​

By default @babel/preset-env uses caller data to determine whether ES modules and module features (e.g. import() ) should be transformed. Generally caller data will be specified in the bundler plugins (e.g. babel-loader , @rollup/plugin-babel ) and thus it is not recommended to pass caller data yourself — The passed caller may overwrite the one from bundler plugins and in the future you may get suboptimal results if bundlers supports new module features.

debug ​

boolean , defaults to false .

Outputs to console.log the polyfills and transform plugins enabled by preset-env and, if applicable, which one of your targets that needed it.

include ​

Version Changes
v7.4.0 Support injecting core-js@3 polyfills

An array of plugins to always include.

Valid options include any:

  • Babel plugins — both full and shorthand names are supported, for example the following are functionally equivalent:
    • @babel/plugin-transform-spread
    • @babel/transform-spread
    • babel-transform-spread
    • transform-spread

    Plugin names can be fully or partially specified (or using RegExp ).

    • Full name ( string ): «es.math.sign»
    • Partial name ( string ): «es.math.*» (resolves to all plugins with es.math prefix)
    • RegExp Object: /^transform-.*$/ or new RegExp(«^transform-modules-.*»)

    Note that the above . is the RegExp equivalent to match any character, and not the actual ‘.’ character. Also note that to match any character .* is used in RegExp as opposed to * in glob format.

    This option is useful if there is a bug in a native implementation, or a combination of a non-supported feature + a supported one doesn’t work.

    For example, Node 4 supports native classes but not spread. If super is used with a spread argument, then the @babel/plugin-transform-classes transform needs to be include d, as it is not possible to transpile a spread with super otherwise.

    The include and exclude options only work with the plugins included with this preset; so, for example, including @babel/plugin-proposal-do-expressions or excluding @babel/plugin-proposal-function-bind will throw errors. To use a plugin not included with this preset, add them to your «plugins» directly.

    exclude ​

    An array of plugins to always exclude/remove.

    The possible options are the same as the include option.

    This option is useful for excluding a transform like @babel/plugin-transform-regenerator , for example if you are using another plugin like fast-async instead of Babel’s async-to-gen.

    useBuiltIns ​

    «usage» | «entry» | false , defaults to false .

    This option configures how @babel/preset-env handles polyfills.

    When either the usage or entry options are used, @babel/preset-env will add direct references to core-js modules as bare imports (or requires). This means core-js will be resolved relative to the file itself and needs to be accessible.

    Since @babel/polyfill was deprecated in 7.4.0, we recommend directly adding core-js and setting the version via the corejs option.

    npm install core-js@3 --save  # or  npm install core-js@2 --save 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *