CODEWITHSUNDEEP
javascriptnpmparceljs
Wickramaranga
Wickramaranga

Reputation: 1191

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.

Upvotes: 3

Views: 1384

Answers (3)

Uriahs Victor
Uriahs Victor

Reputation: 1155

I think you can do this with the workspaces option in package.json: https://docs.npmjs.com/cli/v7/using-npm/workspaces

This library seems to be implementing it: https://github.com/astegmaier/stackoverflow-parcel-namer

Upvotes: 1

carlosvin
carlosvin

Reputation: 979

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.

Upvotes: 1

Wickramaranga
Wickramaranga

Reputation: 1191

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

Upvotes: 3

Related Questions