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 ⭐️ if this project helped you!

bsvobodny / parcel-resolver-ignore Goto Github PK