🐠 Transforms

While many bundlers require you to install and configure plugins to transform assets, Parcel has support for many common transforms and transpilers built in out of the box. You can transform JavaScript using Babel, CSS using PostCSS, and HTML using PostHTML. Parcel automatically runs these transforms when it finds a configuration file (e.g. .babelrc, .postcssrc) in a module. (In addition to any transforms specified in .babelrc, Parcel always uses Babel on all modules to compile modern JavaScript into a form supported by browsers. See the JavaScript/Default Babel Transforms section for more information.)

Third-Party Modules

Configuration files (such as .babelrc) will not be applied to files inside third-party node_modules by default. However, if the module's directory is symlinked (as is common in some monorepo conventions) and the module's package.json has the source field set, then configuration files inside the module's directory will be respected. Here are the types of values supported by the source field:

{
  "main": "foo.js",
  "source": true
}
{
  "main": "foo.js",
  "source": "bar.js"
}
{
  "main": "foo.js",
  "source": {
    "./foo.js": "./bar.js",
    "./baz.js": "./yay.js"
  }
}
{
  "main": "foo.js",
  "source": {
    "./lib/**": "./src/$1"
  }
}

The last example allows you to replace your entire lib directory with src so import 'my-module/lib/test.js' would resolve to 'my-module/src/test.js'. You could also use a top-level catch-all pattern like "**": "./src/$1" for packages like lodash that have many files in the root to replace (e.g. lodash/cloneDeep with lodash/src/cloneDeep).

Help us improve the docs

If something is missing or not entirely clear, please file an issue on the website repository or edit this page.