What is @parcel/transformer-posthtml?
@parcel/transformer-posthtml is a Parcel transformer plugin that allows you to use PostHTML to transform HTML files. PostHTML is a tool for transforming HTML/XML with JavaScript plugins, enabling you to modify HTML structure, add or remove elements, and more.
What are @parcel/transformer-posthtml's main functionalities?
HTML Transformation
This feature allows you to transform HTML files using PostHTML plugins. By adding the transformer to your Parcel bundler configuration, you can apply various PostHTML plugins to modify your HTML files during the build process.
module.exports = function (bundler) {
bundler.addAssetType('html', require.resolve('@parcel/transformer-posthtml'));
};
Custom PostHTML Plugins
You can add custom PostHTML plugins to the Parcel bundler configuration. This allows you to extend the functionality of the HTML transformation process by using custom plugins that perform specific tasks.
module.exports = function (bundler) {
bundler.addAssetType('html', require.resolve('@parcel/transformer-posthtml'));
bundler.addPostHTMLPlugin(require('posthtml-custom-plugin'));
};
HTML Minification
This feature allows you to minify HTML files using PostHTML plugins like 'posthtml-minifier'. By adding the minifier plugin to the configuration, you can reduce the size of your HTML files by removing unnecessary whitespace and comments.
module.exports = function (bundler) {
bundler.addAssetType('html', require.resolve('@parcel/transformer-posthtml'));
bundler.addPostHTMLPlugin(require('posthtml-minifier')({ collapseWhitespace: true }));
};
Other packages similar to @parcel/transformer-posthtml
posthtml
PostHTML is the core library for transforming HTML/XML with JavaScript plugins. It provides a flexible API for creating custom plugins and applying them to HTML files. Compared to @parcel/transformer-posthtml, PostHTML is more low-level and requires manual setup for integration with build tools.
html-webpack-plugin
html-webpack-plugin is a plugin for Webpack that simplifies the creation of HTML files to serve your bundles. It can be used to inject scripts, minify HTML, and more. While it offers some similar functionalities, it is specific to Webpack and does not use PostHTML for transformations.
gulp-posthtml
gulp-posthtml is a Gulp plugin that allows you to use PostHTML in your Gulp build process. It provides similar functionalities for transforming HTML files using PostHTML plugins but is designed to work within the Gulp ecosystem rather than Parcel.