🌀 Parcel plugin that allows you to ignore assets/import syntax from bundling.
# Installs the plugin and saves it as a development dependency
npm i parcel-resolver-ignore -DWe need to create .parcelrc configuration file and add the plugin to resolvers like this:
Syntax "..." instructs Parcel to apply the plugin on top of existing resolvers
{
"extends": "@parcel/config-default",
"resolvers": ["parcel-resolver-ignore", "..."]
}Sometimes, some of our files are not available at build time or we simply don't want Parcel to process them. Or maybe we use special templating syntax for importing files that Parcel doesn't recognize and throws an error.
This is where parcel-resolver-ignore comes into play.
You can find example use-cases below.
ℹ️ NOTE: Examples below are HTML files, but the plugin works with EVERY file (i.e. CSS).
- Excluding files from processing
package.json
{
// An array of Regex patterns
"parcelIgnore": [
"jquery.min.js",
"privacy-policy.html",
"images/.+"
]
}index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>My Title</h1>
<!-- This won't throw build error -->
<a href="./privacy-policy.html">File not available at build time.</a>
<!-- These won't be processed by Parcel -->
<img src="./images/my-image.png" alt="my PNG image" />
<img src="./images/my-image.jpg" alt="my JPG image" />
<script src="jquery.min.js"></script>
</body>
</html>- Ignoring special syntax (i.e. from templating engines)
package.json
{
// An array of Regex patterns
"parcelIgnore": [
"{{.*}}"
]
}index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>My Title</h1>
<!-- This won't throw build error -->
<script src="{{scriptSrc}}"></script>
</body>
</html>- Ignoring files based on NODE_ENV value : "development" (
parcel serve) or "production" (parcel build) or custom.
package.json
{
// An object containing dev and/or prod files to ignore
"parcelIgnore": {
"development": [
"privacy-policy.html",
"images/.+"
],
"production": [
"jquery.min.js",
"images/.+"
],
"test": [
"jquery.min.js"
]
}
}index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>My Title</h1>
<!-- This won't throw build error -->
<a href="./privacy-policy.html">File not available at build time.</a>
<!-- These won't be processed by Parcel -->
<img src="./images/my-image.png" alt="my PNG image" />
<img src="./images/my-image.jpg" alt="my JPG image" />
<script src="jquery.min.js"></script>
</body>
</html>parcel build src/index.html # Success!If you ran Parcel just before adding this plugin, it's possible that stale Parcel caches are causing build failures. First, try to delete the caches folder .parcel-cache in your project's root directory.
Vladimir Mikulic
- Twitter: @VladoDev
- Github: @VladimirMikulic
- LinkedIn: @vladimirmikulic
Contributions, issues and feature requests are welcome!
This project is licensed under MIT license.
Give a ⭐️ if this project helped you!