GitHub

🐠 Трансформации

Хотя многие упаковщики требуют установки и настройки плагинов для трансформации ресурсов, Parcel поддерживает множество распространённых преобразований и транспиляторов из коробки. Вы можете преобразовывать JavaScript, используя Babel, CSS с помощью PostCSS и HTML через PostHTML. Parcel автоматически запускает эти преобразования, когда находит конфигурационный файл (например, .babelrc, .postcssrc) в модуле.

Это даже работает для сторонних пакетов в node_modules: если файл конфигурации публикуется как часть пакета, преобразование автоматически включается только для этого модуля. Это ускоряет связывание (bundling), поскольку обрабатываются только модули, которые необходимо преобразовать. Это также означает, что вам не нужно вручную настраивать преобразования для включения и исключения определённых файлов, а также знать, как создаётся сторонний код для использования его в приложении.

Babel

Babel является популярным транспилером для JavaScript с большой экосистемой плагинов. Использование Babel с Parcel работает так же, как использование его отдельно или с другими упаковщиками.

Установка пресетов и плагинов в приложении:

yarn add @babel/preset-react

Затем создайте .babelrc:

{
  "presets": ["@babel/preset-react"]
}

Транспиляция babel'ем по умолчанию

Parcel транспилирует ваш код с пресетом @babel/preset-env по умолчанию, с его помощью каждый внутренний (локальные require'ы) и внешние (node_modules) будут транспилировны под указанный target.

PostCSS

PostCSS - это инструмент для преобразования CSS с помощью плагинов, таких как autoprefixer, Preset Env и CSS Modules. Вы можете настроить PostCSS с помощью Parcel, создав конфигурационный файл, используя одно из следующих имен: .postcssrc (JSON), .postcssrc.js или postcss.config.js.

Установка плагинов в приложении:

yarn add postcss-modules autoprefixer

Затем создайте .postcssrc:

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true
    }
  }
}

Плагины указываются в объекте plugins как ключи, а опции определяются с использованием значений объекта. Если для плагина нет параметров, просто установите вместо этого значение true.

Целевые (?) браузеры для Autoprefixer, cssnext и других подобных инструментов, указываются в файле .browserslistrc:

> 1%
last 2 versions

Модули CSS поддерживаются несколько иначе, используя верхний уровень ключей modules. Это связано с тем, что Parcel нуждается в специальной поддержке CSS-модулей, поскольку они экспортируют объект, который также будет включен в JavaScript бандл. Обратите внимание, что вам все равно необходимо установить postcss-modules в ваш проект.

PostHTML

PostHTML - инструмент для преобразования HTML с помощью плагинов. Вы можете настроить PostHTML с помощью Parcel, создав конфигурационный файл, используя одно из следующих имен: .posthtmlrc (JSON), .posthtmlrc.js или posthtml.config.js.

Установка плагинов в приложении:

yarn add posthtml-img-autosize

Далее, создайте .posthtmlrc:

{
  "plugins": {
    "posthtml-img-autosize": {
      "root": "./images"
    }
  }
}

Плагины указываются в объекте plugins в качестве ключей, а опции определяются с использованием значений объекта. Если для плагина нет параметров, просто установите вместо этого значение true.

TypeScript

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

<!-- index.html -->
<html>
  <body>
    <script src="./index.ts"></script>
  </body>
</html>
// index.ts
import message from './message'
console.log(message)
// message.ts
export default 'Hello, world'

ReasonML/BuckleScript

ReasonML компилирует OCaml в JavaScript с помощью BuckleScript. Вы можете использовать ReasonML, установив зависимости и создав bsconfig.json:

$ yarn add bs-platform --dev
// bsconfig.json
// из https://github.com/BuckleScript/bucklescript/blob/master/jscomp/bsb/templates/basic-reason/bsconfig.json

{
  "name": "whatever",
  "sources": {
    "dir": "src",
    "subdirs": true
  },
  "package-specs": {
    "module": "commonjs",
    "in-source": true
  },
  "suffix": ".bs.js",
  "bs-dependencies": [],
  "warnings": {
    "error": "+101"
  },
  "namespace": true,
  "refmt": 3
}
<!-- index.html -->
<html>
  <body>
    <script src="./src/index.re"></script>
  </body>
</html>
/* src/index.re */
print_endline("Hello World");

ReasonReact

ReasonReact - это привязка React для ReasonML. Вы также можете использовать её с Parcel:

$ yarn add react react-dom reason-react
// bsconfig.json

{
  "name": "whatever",
+ "reason": {
+   "react-jsx": 2
+ },
  "sources": {
    "dir": "src",
    "subdirs": true
  },
  "package-specs": {
    "module": "commonjs",
    "in-source": true
  },
  "suffix": ".bs.js",
  "bs-dependencies": [
+   "reason-react"
  ],
  "warnings": {
    "error": "+101"
  },
  "namespace": true,
  "refmt": 3
}
<!-- index.html -->
<html>
<body>
+  <div id="app"></div>
  <script src="./src/index.re"></script>
</body>
</html>
/* src/Greeting.re */

let component = ReasonReact.statelessComponent("Greeting");

let make = (~name, _children) => {
  ...component,
  render: _self => <div> (ReasonReact.string("Hello! " ++ name)) </div>,
};
/* src/index.re */

ReactDOMRe.renderToElementWithId(<Greeting name="Parcel" />, "app");

Помогите нам улучшить документацию

Если что-то отсутствует или не совсем понятно, пожалуйста опишите проблему в репозитории сайта или отредактируйте эту страницу.