I am interested in developing a plugin to enable raw loading of a specific type of file with Parcel. According to the documentation, Parcel detects plugins published on npm with certain prefixes and automatically loads them along with their dependencies listed in package.json. However, I prefer not to publish my plugin code on npm as a standalone package. Is there a way to load a project-local plugin with parcel instead?
Thank you for your assistance.
Struggling to find a solution using a parcel-based approach, I opted for an alternative method utilizing npm:
To begin, I established a directory named local_modules (which can be named anything desired). Within this directory, I created a subfolder called parcel-plugin-x. Within the plugin folder, I proceeded to develop my plugin as usual. Additionally, I crafted a package.json file specifying the main entry point. Dependencies required for the module were also defined in a manner similar to that of a standalone project.
{
"name": "parcel-plugin-x",
"version": "0.1.0",
"description": "Parcel plugin x",
"main": "index.js",
"devDependencies": {
},
"dependencies": {
}
}
Directory organization:
project-folder
|---local_modules
|---parcel-plugin-x
|---index.js
|---package.json
|---package.json
Subsequently, running
npm i --save-dev .local_modules/parcel-plugin-xproject-folder enabled the addition of "parcel-plugin-x": "./local_modules/parcel-plugin-x",package.json. This practice adheres to the standard protocol for loading local modules in npm. Any modifications made to the plugin mandate running npm upgrade, along with incrementing the version number of the plugin. This process facilitates copying the plugin to node_modules and installing necessary dependencies.
Per the documentation from parceljs:
Any dependencies specified in package.json with designated prefixes will automatically load during initialization.
With these adjustments implemented, the solution now operates seamlessly! :)
I took a similar approach, utilizing npm link in my workflow.
Within the plugin directory (parcel-plugin-x), I simply executed: npm link.
In the project's directory that uses the plugin:
npm link parcel-plugin-xparcel-plugin-x manually into the package.json filepackage.json
"devDependencies": {
"parcel-plugin-x": "^0"
}
When modifications are made to the plugin, there is no need to execute npm upgrade, however, clearing the .cache folder generated by parcel may be necessary as parcel will bypass processing cached assets.
Exploring the workspaces feature in your package.json file could help achieve this: https://docs.npmjs.com/cli/v7/using-npm/workspaces
You may want to check out this repository for a library that incorporates this functionality: https://github.com/astegmaier/stackoverflow-parcel-namer
My current project involves two sets of draggable elements and two sets of droppable elements. I'm trying to achieve a specific functionality where the first set of draggable elements can only be dropped inside the first set of droppables, while the ...
Embarking on my journey into the world of React, I find myself in need of assistance. The issue at hand involves re-rendering data within my Table component. Whenever a new API call is made to create an entry in my database using Prisma, the newly added d ...
Full code update included. Changing the question: What occurs when all questions are answered in endQuiz, resulting in a user score? A form is displayed for the user to complete and submit to a designated email address. However, upon completing the form a ...
Can anyone shed light on why Validator.js is structured the way it is initialized (as shown in the first code snippet) and the reason behind the inability to call the validate method (as demonstrated in the second snippet)? I am currently experimenting wi ...
i'm trying to generate an object using iteration like this: opts = [{label:1, value:1}, {label:4, value:4}] the values for this object are coming from an array portArray = [1,4] I'm attempting to do const portArray = [1,4]; return { ...
Could you please help me understand why there are no particles visible in this code snippet? I followed a tutorial and it all seems correct. (function() { var camera, scene, renderer; init(); animate(); function init() { scene = new THREE.Scene(); ...
When designing a form with a select dropdown that displays various options, I encountered an issue. I want to disable certain fields if a specific option is chosen from the dropdown. For instance, if "Within Company" is selected in the transaction type, I ...
I need a method to create PDFs using AngularJs that includes HTML, CSS, and JavaScript elements. I have tried two options: jsPDF (which does not support CSS) Shrimp (built on Ruby) Neither of these solutions fit my needs. Is there another way to accom ...
I currently have npm installed, but I am unsure of which command to use in order to upgrade to version 3 of nightwatch. Any assistance would be greatly appreciated. I have already tried running 'npm install nightwatch', but it seems to still be ...
After reviewing other discussions on this platform, it seems that the general agreement is that forEach should be synchronous and block. However, in my code, something appears to be off as it doesn't behave that way: var noDupes = false; // se ...
I am attempting to send information to admin-ajax.php in order to save it as a $_POST variable for handling on the cart page. However, my .ajax function keeps failing. var sendJsonA = {'value':'Data coming from JSON'} var ajaxurl = $ ...
I attempted to utilize 'getelementbyclassname' within VUE methods. My reason for doing so is that instead of applying information using :style, I would like to adjust the width of the div where I applied my class named 'classon'. I ...
Control Code: $scope.$on('$locationChangeStart', function () { var path = $location.path(); var adminPath = '/admin/' ; if(path.match(adminPath)) { $scope.adminContainer= function() { return true; }; }); HTML <div clas ...
Currently, I am implementing a form submission using AJAX. The form consists of only one input field and the submit button is hidden. My aim is to ensure that when the user hits the enter key, the input field does not lose its focus. Here's the code s ...
Within my application, a template is utilized: <div class="skills-filter-input" ng-class="{'hidden-xs': skillsFilterHidden}"> <input type="text" ng-model="skillQuery" ng-change="filterSkills()" placeholder="Filter skills" class="filter- ...
I have successfully implemented code that displays alerts for a specific period of time, indicated by (alert alert-warning). Additionally, I want to display another type of alert, (alert alert-success), for a certain amount of time, after which the page sh ...
I am creating a webpage with various shapes and elements. However, I am facing a challenge with creating a shape that is commonly used. In platforms like Khan Academy, there is simulated programming where shapes can be easily created with a simple command ...
I need a solution for excluding hidden fields from HTML form validation. My situation involves having two groups of form fields, each with some required attributes. Depending on user selection, one group may be hidden, and those fields should not contribut ...
What's the issue: Recently, I began learning reactjs. In the process of creating a new react app, the build fails and only a package.json file is generated. > PS D:\react-projects> npx create-react-app app-name Creating a new > Reac ...
I have a JavaScript Azure function that takes a context and request as parameters: function(context, req) It's easy to retrieve data from a GET request using the req object. For example, if I pass name=test in the URL, I can retrieve it in my code l ...