Parcel conversion

Conversion
Although many bundlers require you to install and configure plug-ins to convert resources, Parcel has many built-in conversions and translators for you to Ready to use out of the box. You can use Babel to transform JavaScript, CSS using PostCSS, and HTML using PostHTML. Parcel automatically runs these transformations when configuration files (e.g. .babelrc , .postcssrc ) are found in the module.
This even works in third-party node_modules: if the configuration file is published as part of a package, the transformation is automatically turned on and only applies to that module. Since only the modules that need to be converted are processed, packaging can be done quickly. It also means you don't need to manually configure transformations to include and exclude certain files, or know how third-party code is built in order to use it in your application.
Babel
Babel is a popular JavaScript transpiler with an extensive plugin ecosystem. You use Babel with Parcel the same way you use it alone or in conjunction with other packagers.
Install presets and plugins into your application:

yarn add babel-preset-env

Then, create a .babelrc file:

{
  "presets": ["env"]
}

PostCSS
PostCSS is a tool for converting CSS using plug-ins, such as autoprefixer, cssnext, and CSS Modules. You can make Parcel use PostCSS configuration by creating a configuration file using one of the following names: .postcssrc (JSON), .postcssrc.js, or postcss.config.js.
Install the plugin in your application:

yarn add postcss-modules autoprefixer

Then, create a .postcssrc file:

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

The plug-in is specified in the key of the plugins object, and the option definition uses the object value. If the plugin has no options, just set it to true.
Target browsers for Autoprefixer , cssnext and other tools can be specified in the .browserslistrc file:

> 1%
last 2 versions

CSS Modules are enabled slightly differently, using the top-level modules key. This is because Parcel requires special support for CSS Modules, since they also export an object for inclusion into the JavaScript bundle. Please note that you still need to install postcss-modules in your project.
PostHTML
PostHTML is a tool for converting HTML using plug-ins. You can configure Parcel to use PostHTML by creating a configuration file using one of the following names: .posthtmlrc (JSON), posthtmlrc.js, or posthtml.config.js.
Install the plugin in your application:

yarn add posthtml-img-autosize

Then, create a .posthtmlrc file:

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

The plug-in is specified in the key of the plugins object, and the option definition uses the object value. If the plugin has no options, just set it to true.
TypeScript
TypeScript is a superset of JavaScript types that can be compiled into ordinary JavaScript. It also supports modern ES2015 features. TypeScript can be converted without any additional configuration.

<!-- 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";

Parcel conversion

php.cn