Zhus on First

(software-carpentry) complete beginner’s guide to npm

NPM is one of commands I've used a lot. I've peeked into the node_modules folder and into the package-lock.json. Yeah and I've been daring enough to do some minor experimentation with these files. As in, manual editing 😅.

NPM has been one of those things that's just worked despite my furious keyboard clacking, but I wanted to learn more about it--and of course, in a structured way.

By now, I've grown to like tutorials that are somewhat dated. Just like my adventures in deep learning using the fast.ai library, having the tutorial be somewhat dated turns out to be a blurse. I have to debug and do a little of my own research to get some things to work. That's great because I have some structured guidance, but I have to understand it and then iterate--then experiment.

I followed a tutorial by Josh Collinsworth: https://css-tricks.com/a-complete-beginners-guide-to-npm

I was able to speed through the tutorial from the little research I've already done from having to use it in my past projects. Still, the tutorial had made some good linkages for me.

For example, I didn't know the full connection between package.json and package-lock.json:

Remember, all the sub-dependencies of Sass are tracked in package-lock.json, which is auto-generated, and shouldn’t be edited by hand. package.json generally just contains the top-level dependencies, and we can customize it freely.

I would only emphasize this call out on page 7: how to install npm packages

just be sure you’re in a new folder you created for this little project first This ensures any installs from the project are in a controlled directory you create.

Also, on page 8: what the heck are npm commands, you may need to run sass:watch using

npm run sass:watch

npm will find the sass module correctly. It may not if you just run the command sass:watch--unless you've installed sass differently, ie. globally.




P.S. I also needed to tweak my customized Oh My Zsh .zshrc file to recognize node/nvm. I switched to Oh My Zsh after having already installed node/nvm way before. You'll find a similar section in your .zshrc file. MAKE SURE YOU MAKE A BACKUP FIRST. I'll just copy/paste the relevant section from my own config script:

# ...other settings
# Lazy startup of plugins (3/25/24)
zstyle ':omz:plugins:nvm' lazy yes
zstyle ':omz:plugins:pyenv' lazy yes

# Fix "Found pyenv, but it is badly configured" error: https://github.com/ohmyzsh/ohmyzsh/tree/master/plugins/pyenv
# Added last export to create env in project directories.
export PYENV_ROOT="$HOME/.pyenv"
export PATH="$PYENV_ROOT/bin:$PATH"
eval "$(pyenv init --path)"
export PIPENV_VENV_IN_PROJECT=1

# Which plugins would you like to load?
# Standard plugins can be found in $ZSH/plugins/
# Custom plugins may be added to $ZSH_CUSTOM/plugins/
# Example format: plugins=(rails git textmate ruby lighthouse)
# Add wisely, as too many plugins slow down shell startup.
plugins=(
  git
  nvm
  pyenv
)
# ...other settings

Posts with tag "sketch"

#software-carpentry