What is @parcel/config-default?
@parcel/config-default is a default configuration package for Parcel, a web application bundler. It provides a set of default plugins and settings that Parcel uses to bundle various types of assets like JavaScript, CSS, HTML, and more. This package simplifies the setup process by providing a pre-configured environment that works out of the box for most projects.
What are @parcel/config-default's main functionalities?
JavaScript Bundling
This configuration uses the default Parcel config to bundle JavaScript files using the Babel transformer. It ensures that modern JavaScript syntax is transpiled to be compatible with older browsers.
{
"extends": "@parcel/config-default",
"transformers": {
"*.js": [
"@parcel/transformer-babel"
]
}
}
CSS Bundling
This configuration uses the default Parcel config to bundle CSS files using the PostCSS transformer. It allows for the use of modern CSS features and plugins.
{
"extends": "@parcel/config-default",
"transformers": {
"*.css": [
"@parcel/transformer-postcss"
]
}
}
HTML Bundling
This configuration uses the default Parcel config to bundle HTML files. It processes HTML files to include dependencies like scripts and stylesheets.
{
"extends": "@parcel/config-default",
"transformers": {
"*.html": [
"@parcel/transformer-html"
]
}
}
Asset Optimization
This configuration uses the default Parcel config to optimize JavaScript and CSS files using Terser and CSSNano respectively. It helps in reducing the file size for production builds.
{
"extends": "@parcel/config-default",
"optimizers": {
"*.js": [
"@parcel/optimizer-terser"
],
"*.css": [
"@parcel/optimizer-cssnano"
]
}
}
Other packages similar to @parcel/config-default
webpack
Webpack is a highly configurable module bundler for JavaScript applications. Unlike @parcel/config-default, which provides a set of default configurations, Webpack requires more manual setup but offers greater flexibility and control over the build process.
rollup
Rollup is a module bundler for JavaScript that focuses on ES6 modules. It is similar to Parcel in that it can bundle JavaScript files, but it is more specialized for library development and offers tree-shaking to remove unused code.
gulp
Gulp is a toolkit for automating tasks in the development workflow. While it can be used to bundle assets like Parcel, it is more of a task runner and requires more configuration and setup compared to the default configurations provided by @parcel/config-default.