How do I use a local plugin with ParcelJS - npm

I use ParcelJS to bundle my JavaScript code. I want to modify an existing plugin (say the Elm plugin) to convert some special files on the fly with our own proprietary transpiler to JavaScript.
Therefor I cannot install the plugin from teh npmjs repo via Yarn into the node_modules folder. I have the relevant plugin files (asset.js, index.js, package.json) in a local directory myplugin. How do I tell ParcelJS to use them?

If you have your plugin with a package.json in the directory myplugin you can add add it (as a dev dependency) with the following command:
yarn add ./myplugin --dev
Yarn will copy the plugin to the node_modules folder. When you have changed stuff in your plugin folder increase the version number in the plugin's package.json and run yarn upgrade.

Related

What package versions are installed when running vite build?

This is probably a pretty basic question, but I can't find an answer:
If I have a project with a dependency in package.json listed as foobar: ^3.2.1, what version of that dependency will be installed when I run vite build, assuming that the latest available version of the package is 3.4.5?
First thing first, vite build won't change anything to your dependencies. I won't install ones nor update them. It will only build your project (i.e. compile / transpile / minify / bundle etc.) using your source code and the code it imports (likely within the node_modules).
It will build locally, so using your local dependencies in the node_modules folder.
To check the current package version you have installed, you can run:
npm list --depth=0 | grep foobar
(The grep part is optional)
You can also open your package-lock.json or yarn.lock file and search for your package to know to what version your package has been fixed to.
To understand about the semantic version with npm, read this documentation: https://docs.npmjs.com/about-semantic-versioning

Automatically downloading npm packages listed in package.json file

I'm working on creating a local repository that will contain all packages I use in my project, so I can have those packages installed on a machine that does not have access to the internet. I think of the repository that I could clone on the machine and run yarn install to have all the packages available in the project from the local repository. How can I do that? Similar question was asked here Using npm how can I download a package as a zip with all of its dependencies included in the package
There's not enough information in your question to fully understand your situation, but if you commit your node_modules directory to the repository, the modules will be there without the user having to run npm or yarn to install them. This assumes the user will run code from the repo workspace and that there aren't any modules that require a compilation step or other build step that may be platform-specific. But if they're all plain ol' JavaScript modules, you should be fine.
If you want to have all the modules as a separate repo rather than checking in node_modules, I can offhand think of two ways this might work.
Have the packages repo be a check-in of a fully installed node_modules directory. Then make that repo a Git submodule of the main repo that gets cloned as node_modules in the main repo.
Use npm pack to create .tgz files for each package you need. Store those files in the packages repo. Clone that repo into a known path on your target machine. Have the main repo install via path names. For example, if you run npm install /var/packages/foo-1.0.0.tgz, it will add a line to your package.json that might look something like this: "foo": "file:../../../var/packages/foo-1.0.0.tgz". In that case, npm install will install from that path rather than over the network.

How to avoid adding package to node_modules if it placed locally

I have repository with app and modules. Modules includes in app by package.json like:
"application-module": "file:../modules/application-module"
After yarn install that dependency added to node_modules.
I want to make module-base application. app folder reproduce root module. Other modules like admin-panel-module, account-module should be in modules folder. So, app may have node_modules inside, but also modules folder for modules. Those modules will add by git subtree from another repos. So, this way I can develop independently
Is any way to avoid adding and use local directories?
Multiple node_modules and package.json
In any node/npm project, you can have multiple package.json across your directory tree, like:
app/
package.json
node_modules
src...
account_module/
package.json
node_modules
src...
admin_module/
package.json
node_modules
src..
When you invoke yarn (or npm install ofc) on any of the children modules, the dependencies listed in their local package.json will be installed on the local node_modules folder.
So basically you can solve your issue ensuring that every children has their own package.json with their dependencies.
Still, you can place common dependencies in the root app folder. If all your projects for instance use lodash, you can place the lodash dependency in the add's package_json. After performing yarn in the app folder, the lodash package will be installed in the app's node_modules.
After that, if you:
require('lodash');
In any of the children, they will search for lodash in the app's node_modules folder if they don't find lodash in their own node_modules.
If you don't have a root node_modules, you can still declare a package.json local to any of the submodules, and they'll have their own node_modules.
So maybe you may want to avoid common dependencies at all, or maybe you want to store common dependencies in the app folder. Npm has you covered either ways.
However, if you don't want to handle common dependencies, yet are concerned about having to store a lot of duplicated packages in local machines, you may want to checkout pnpm, which is a wrapper over npm which allows to save a lot of space in local development machines.
I'm having (almost) the same issue with yarn.
I have create a package (typescript) called "test". In this package, after built, there are mainly 3 directories : dist (after built), node_modules and src.
Then I have created another package "test2" and in this package, have added "test" as a dependency "yarn add c:/.../.../test".
The package is the well installed in the node_module of test2. BUT, in "test2/node_modules/test", I can find the node_modules of test ( "test2/node_modules/test/node_modules". Why ? It increases the size of the package a lot.
In both tsconfig.json (test and test2) node_modules is excluded...
thks

Why does npm run eject look through all my project folders?

I am trying to run an npm run eject on a new project so I can configure Webpack files, but I got this message:
✗ npm run eject
> location#0.1.0 eject /Users/danale/Projects/location
> react-scripts eject
NOTE: Create React App 2 supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html
? Are you sure you want to eject? This action is permanent. Yes
This git repository has untracked files or uncommitted changes:
Why is it referencing all the project folders? To be clear I am running the above command inside of one project folder I just created with CRA.
I am not in the folder with all my projects, I am in the folder with one newly created project. With that said, why is npm referencing all my other projects?
Before you eject a react project created with create-react-app they give you the following cookie cutter response of:
NOTE: Create React App 2 supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html
? Are you sure you want to eject? This action is permanent. Yes
This git repository has untracked files or uncommitted changes:
The reason for this is a lot of people want to have a granular level of control of their webpack.config.js file and you've to eject to get access to this file as it's obfuscated away within your react-scripts module. Now the part of the eject warning message saying:
NOTE: Create React App 2 supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html
Is to inform you that you don't have to eject to take advantage of preprocessors, TypeScript, etc.... They tell you this because create-react-app didn't always support the easy addition of this functionality so people would eject to be able to use preprocessors and TypeScript.
You're correct that in order to use SASS all you have to do is:
Install the node-sass module with a: npm install node-sass
Then just create your .scss files and import your desired .scss file in the component you wish to use the styling at. Alternatively, you could also just have a "main" .scss file whose only job is to import other .scss files relevant for your app. Then import this "main" .scss file within your App.js file.
Now as for this part of the eject warning message:
This git repository has untracked files or uncommitted changes:
You're probably getting this because you've set up a git repository for a parent folder where you ran the create-react-app CLI. Basically, in one of your parent folders where your create-react-app interface is located at is a .git/config that points upstream to one of your remote repositories.
Hopefully that helps!
Between what I read in the documentation suggested in the error message and from tinkering with it, all you have to do is:
npm install node-sass
and then you can start changing css files to scss and creating other scss files for your project. No npm run eject necessary.

Yarn removes folder within installed dependency

I am using Yarn v0.19.1 to install some dependencies. I deleted my node_modules folder completely and did a fresh yarn install.
I am trying to install the dependency leaflet using yarn add leaflet. The module installs successfully, except during the Cleaning Modules... phase, Yarn removes the images folder which would typically live within leaflet/dist/images. When I do a npm install leaflet this folder does not get removed.
During a yarn install, the images folder is present until the Cleaning modules phase happens.
Who/what is doing this? Is this something yarn does? Or is this something specified within the leaflet library? How could I resolve this?
I checked the package.json in the leaflet library and nothing seemed out of the ordinary there. It runs a jake file, but even within that file nothing is being deleted related to images.
Here is what the folder looks like, within my node_modules folder, for both package manager installs:
yarn
npm
There was a .yarnclean file in my project. This added some files/folders to ignore when installing dependencies. Running yarn clean added this file and I wasn't aware until I saw this issue. Viewing the docs also gave the same info.
I resolved this by removing images from the set of ignored directories.
Here is my .yarnclean file for an example:
# test directories
__tests__
test
tests
powered-test
# asset directories
docs
doc
website
assets
# examples
example
examples
# code coverage directories
coverage
.nyc_output
# build scripts
Makefile
Gulpfile.js
Gruntfile.js
# configs
.tern-project
.gitattributes
.editorconfig
.*ignore
.eslintrc
.jshintrc
.flowconfig
.documentup.json
.yarn-metadata.json
# misc
*.gz
*.md