Search code examples
javascriptnpmparceljs

Loading a local ParcelJS plugin


I want to create a plugin so that I can raw-load a certain type of file with parcel. Parcel docs states that:

Publish this package on npm using parcel-plugin- or @your-scope/parcel-plugin- prefixes, and it will be automatically detected and loaded as described below.
...
Any dependencies listed in package.json with these prefixes will automatically be loaded during initialization.

Since this is a one-time thing, I don't want to publish the code on npm as a plugin. How do I load my project-local plugin with parcel?

Thanks in advance.


Solution

  • Since I could not find a way to do this in a parcel way, I did this in an npm way:

    I created a folder named local_modules (this can be anything you want.) Then created parcel-plugin-x inside local_modules. Inside that, I created my plugin as usual. I also created a package.json specifying the entry point main. You can specify the dependencies required for the module just like if this is a separate project (THIS IS!).

    {
      "name": "parcel-plugin-x",
      "version": "0.1.0",
      "description": "Parcel plugin x",
      "main": "index.js",
      "devDependencies": {
      },
      "dependencies": {
      }
    }
    

    Directory structure:

    project-folder---local_modules---parcel-plugin-x  
                 |---package.json                  |
                                                   |---index.js
                                                   |---package.json
    

    Then I ran npm i --save-dev .local_modules/parcel-plugin-x inside the project-folder. It adds the line "parcel-plugin-x": "./local_modules/parcel-plugin-x", to the root package.json. This is the standard way of loading local modules in npm. And everytime you make changes to the plugin, you have to run npm upgrade. You should also increase the version of your plugin, too. This copies the plugin to node_modules and install dependancies.

    According to the parceljs docs:

    Any dependencies listed in package.json with these prefixes will automatically be loaded during initialization.

    now it works! :)