Installing package dependencies in Atom - npm

I've added the following into my package.json file:
"dependencies": {
"linter": "1.11.4"
}
But how do I actually get this dependency installed?

After you have updated your packages.json and saved the file you can install the dependencies by running Update Package Dependencies: Update:
Press Ctrl-Shift-P to open the Command Palette.
Type updu which should select Update Package Dependencies: Update
Press Enter
If you are going to be doing a lot of this you can take it a step further and add a keybinding:
'atom-workspace':
'ctrl-alt-shift-u': 'update-package-dependencies:update'

You install your package then Atom/npm take care of installing the dependencies.
https://discuss.atom.io/t/load-developing-package/2554/4
When you start Atom it loads packages from various directories. When you open it in developer mode it loads additional packages from ~/.atom/dev/packages, so the first thing to do is to move/symlink your package to that directory.
Then you can go to your new package directory and run atom -d . to create a new atom window in developer mode and automatically add your package as a project directory.
Then you can run apm install to update your dependencies.

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

does "npm pack" memorize version of package?

I'm newbie at development, first, I'm not good at English. I hope your understanding.
TLDR;
I'm making UI library now. for the test of it, I found npm pack command.
It seems like If I enter npm pack once in specific version, then I cannot change the library contents without upgrading version in package.json file.
I wanna modify contents of library and test of it without version upgrade before publish.
is this possible?
ex) my situation
library v0.0.8, I found some problems.
modified contents of library without upgrading version(to v0.0.9)
npm pack
install library at test folder
changes were not reflected in test folder.
package.json -image
I'm making an npm UI library for company.
I was thinking about how to do the test of it, and found "npm pack" command.
I made the pacakage version v0.0.8, and entered the "npm pack" command.
after copy of tgz file, I pasted it to root directory of test folder.
and I downloaded it with yarn add ./library-test-0.0.8 at test folder.
after that, I found some problems of library, so modified those at package files.
but I didn't modified version of pacakage as v0.0.9 in package.json file.
after delete all builded files at dist directory, I entered npm build, npm pack
and I deleted v0.0.8 from my test folder with yarn remove library-test
again, after copy of new tgz file, I pasted it to root directory of test folder.
However, the changes I made were not properly reflected at test folder.
I tried npm cache clean --force, but it didn't work.
also, I tried it in new test folder, but it was same.
folder structure -image at ui-library
folder structure -image at test folder
as you can see above images, types folder should be deleted.
I guess, if I enter 'npm pack' command once, npm memorize that version and does not change.
is there any way to reset this npm's behavior?
I tried modifying version in pacakage.json(by upgrading v0.0.9) at my pacakge, it worked.
but this method will confuse me in the future..
I searched like below.
how to reset npm pack version
npm pack memorize version
npm pack revert
but I couldn't find what I want.
is there anyone who can give me some keywords or sites for this problem?

Patching a NPM package locally with patch-package, not working

I'm working on a vue.js frontend, and I need to patch a package to fit the special needs of the app. The package I'm trying to patch is 'vue-youtube' (not that it really matters). I'm trying to patch it with patch-package (https://www.npmjs.com/package/patch-package)
So basically :
I edited locally the /node_modules/vue-youtube/src/vue-youtube.js to fit my needs
I did add the postinstall script in my package.json : "scripts": { "postinstall": "patch-package" }
I did npm install patch-package --save-dev
Then I ran npx patch-package vue-youtube
It did create a vue-youtube+1.4.0.patch file in a /patches folder with my modifications
BUT, my modifications are not seen. When I do npm run serve and launch my webapp, the package used is still the one not edited. I tried running npm install before, without success. When I go to the /node_modules/vue-youtube/dist/vue-youtube.js (thankfully it is a small package so it is readable), I can see that indeed my modifications have not been "compiled".
What am I missing here ? I feel like I have followed eveything in the patch-package npm page..
Thanks
EDIT : Still investigating.. few more informations/questions :
my patch name is patches/vue-youtube+1.4.0.patch
when i run npm ls vue-youtube it returns just one element : vue-youtube#1.4.0
in my package.json the dependency listed is "vue-youtube": "^1.4.0", should it be different ? should it mention that it needs to be patched ?
EDIT 2 : I realized that I am not editing the node_modules/vue-youtube/dist/vue-youtube.js, but the node_modules/vue-youtube/src/vue-youtube.
If you edit the files in the dist folder, the patch works. (however I thought patch-package would allow me to edit the files in the src folder, in readable JS...)
WORKING SOLUTION :
If you edit the files directly in the dist/ folder of the package instead of the src/ folder, the patch works fine.
Adding below npm script in package.json after patching worked for me.
scripts: {
"prepare": "patch-package",
}
The lines from yarn documentation explains about prepare
For compatibility reasons, scripts called install, postinstall, prepublish, and prepare will all be called after your package has finished installing.
After adding this script in package.json, the changes of module file in patches folder has been patched into respective node module.
I was trying to do the exact same thing with some package, let's call it "some_package". When I saw the EDIT 2 my mind just connected the dots...
To test changes locally
Modify the files in node_modules/some_package/src folder and then, go to the node_modules/some_package and run:
$ npm install
$ npm run <name of the script that generates the dist folder>
No need to run npx patch-package nor postinstall step.
I think that this approach doesn't work for all packages, it depends on how the modified package's package.json is configured. Specifically, pay attention where the browser field is pointing (in my case ./dist/some_package.js).
CAVEAT: You will have to run npm install and npm run every time you make an update to the package.
To test changes and be able to share it among team members (when the package is on Github)
Make a fork of the package you want to modify.
Make all the changes you want to your forked version of the package.
Run the following to automatically update the package.json file to make the dependency point to your forked version:
$ npm install <github's user name>/<package's name of the forked repository>#<branch name> --save-prod
For instance, if your Github's user name is "johndoe", and you forked https://github.com/aurelia/framework, and you made a branch named "mycoolbranch" containing your changes, then it would be:
$ npm install johndoe/aurelia-framework#mycoolbranch --save-prod
Note that the --save-prod flag could be replaced with --save-dev if the dependency is just for development.
Take a look at this answer, it may help.
https://stackoverflow.com/a/71153240/9981565
For me it was happening because of version mismatch between package.json intended version of package and yarn.lock / package-lock.json

How to include static resources when publishing an Atom package

I'm working on an Atom package that requires some static resources. I was expecting the following to work:
Define scripts.prepublish in package.json to call a script to download the external resources
Publish the Atom package on atom.io with apm publish VERSION
Install the Atom package from atom.io with apm install PKGNAME
Unfortunately it seems the prepublish script is not executed,
and so the package gets installed without the static resources.
Curiously, if I install with apm install REPOREF instead of apm install PKGNAME, then the prepublish step gets called, and the package will have the static resources.
The relevant parts from my package.json:
"name": "janos-ss-prepublish-demo",
"repository": "https://github.com/janos-ss/prepublish-demo",
"scripts": {
"prepublish": "node ./scripts/setup.js"
},
"files": [
"files"
],
files here is the directory where node ./scripts/setup.js downloads the static resources, if the package is installed with npm install.
After publishing with apm, if I install the package with apm install janos-ss-prepublish-demo, it seems the prepublish step will not get executed and the package will not have the static resources.
If I install the package with apm install janos-ss/prepublish-demo, the prepublish step is executed and the package will have the static resources.
Notice the difference in the two apm install commands, the first uses the name of the package as published on atom.io,
the second uses a GitHub repository reference,
with my GitHub username and the name of the repository.
Installing with apm install REPOREF is not an option,
because it requires explicit user action, which I don't want.
I want users to be able to install the complete package from atom.io, using the natural way from the package explorer of Atom itself.
If I understand correctly this pending pull request confirms that what I'm trying to do is currently not possible. I also tried to use a custom build of apm from the pull request, rebased on top of the official master, but it still did not work, so I'm not sure if I'm understanding correctly what's going on here.
Is there something fundamentally wrong with what I'm trying to do?
Is there another way to include static resources in the package on atom.io?
My current workaround is to download the static resources after the package is installed and activated. But this is unnecessary complexity at runtime, and ugly.
A minimal reproducible package is on GitHub.
Repro steps:
apm publish patch
apm install janos-ss-prepublish-demo
ls ~/.atom/janos-ss-prepublish-demo # error, doesn't exist
apm install janos-ss/prepublish-demo
ls ~/.atom/janos-ss-prepublish-demo # exists

Package.json in MVC template with VSCode

I imported MVC template by running dotnet new mvc -lang C#. I got default template here but I noticed it's missing package.json file.
How can I add package.json in VSCode editor to this template to add other required references ?.
You can use npm init command from node package manager.
Open Nodejs command prompt.
Navigate to project directory.
type npm init command.
Specify basic details like name, version, description, entry point etc.
This will create basic of package.json. Then, you can use npm install <package> --save to install new npm packages in your project.
Other option is, you can create package.json manually.