parcel-resolver-ignore
🌀 Parcel plugin that allows you to ignore assets/import syntax from bundling.
📦 Installation
# Installs the plugin and saves it as a development dependency
npm i parcel-resolver-ignore -D🔌 Configuration
We 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", "..."]
}☁️ Usage
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>🚀 Build
parcel build src/index.html # Success!🔧 Troubleshooting
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.
👨 Author
Vladimir Mikulic
- Twitter: @VladoDev
- Github: @VladimirMikulic
- LinkedIn: @vladimirmikulic
🤝 Contributing
Contributions, issues and feature requests are welcome!
📝 License
This project is licensed under MIT license.
👨🚀 Show your support
Give a