Loading a local ParcelJS plugin

user_3977826 0
Viewed 1054

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.

parceljs npm javascript
3 Answers

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! :)

user_39778260

I did something similar, but with npm link.

In plugin folder (parcel-plugin-x) just run: npm link.

In the project folder using the plugin:

  • Link to parcel-plugin-x: npm link parcel-plugin-x
  • In package.json file, manually add the dependency to parcel-plugin-x

package.json

"devDependencies": {
    "parcel-plugin-x": "^0"
}

Each time you make changes to the plugin, you don't have to run npm upgrade, but you might have to remove .cache folder created by parcel, because parcel will skip processing cached assets.

user_14210590
user_44847990
Related