SPFX - NPM Install - Slow - npm

Should I need to do a npm install for SPFX if I have already done a global install of all the modules required by SPFX?
Restoring modules is very slow, and I'd really like to avoid doing it if necessary.

To get started coding faster you can start yeoman like this in CMD:
yo #microsoft/sharepoint --skip-install
Open project in preferred IDE, for example VS Code and start coding with:
code .
Start npm install in background with:
npm install
Continue coding in your IDE while npm installs in the background!

I do not recommend to install all spfx packages global. Each project can use different versions of packages. And for each project there is separate node modules folder used to build and package solution. Maybe there is a way to point build and package from globally installed packages but as i wrote there could be huge differences between versions ... just run npm i and take a coffee 😉

Related

npx from command line does not find imports?

I'm trying to run a simple hello.ts script from command line. This works if the script has no dependencies:
npx ts-node hello.ts
But as soon as I start adding some dependencies...
import _ from 'lodash';
console.log('hello');
It fails:
Cannot find module 'lodash' or its corresponding type declarations.
It keeps failing even if I install the dependencies globally. So how do I tell npx (or ts-node for that matter) to consider globally installed dependencies?
Update
Using Node 16.9.1 (upgraded via Version Lens). The error seems to have disappeared after uninstalling/reinstalling the imported libraries a few times.
If you're using npm >=1.0, you can use npm link to create a local link to a package already installed globally. (Caveat: The OS must support symlinks.)
IE: npm install -g lodash && npm link lodash
However, this doesn't come without its problems.
npm link is a development tool. It's awesome for managing packages on your local development box. But deploying with npm link is basically asking for problems, since it makes it super easy to update things without realizing it.
As an alternative, you can install the packages locally as well as globally.
For additional information, see:
https://nodejs.org/en/blog/npm/npm-1-0-link/
https://nodejs.org/en/blog/npm/npm-1-0-global-vs-local-installation/
Are you using the n package by any chance? I used n to change from a newer version of node (16.2.0) to an older version of node (12.13.0), ran npm i and npx failed with a different error.
Using n to change back to 16.2.0 seems to have resolved the issue so I'm thinking perhaps it was an issue with package-lock.json or such

Is it a good idea to call make from npm scripts

TLDR: How reliable is an assumption that a compatible version of make is installed on machines that my NPM package will be installed on?
I'm working for a client who is really fond of make and Makefiles. We need to integrate a JS package into another project. My go-to method would be npm install our-package. The package requires a build step. We want to be able to install versions that are not yet released to npm.js from GitHub. The build process is more than one line of shell script so I don't want to repeat it in Makefile and in package.json (it will go out of sync real quick). Straight forward way is to set scrpits.prepare to make in packgae.json. But I'm concerned about cross-platform compatibility (Windows, containers, etc).
Update: I've also discovered that it's extremely easy to create an endless loop where make calls npm ci or npm install and then npm calls make. With npm install there is --ignore-scripts option, but ci doesn't have an equivalent, see: https://npm.community/t/add-ignore-scripts-option-to-clean-install-ci-command/6322

Webpack uninstall not working properly

I decided to remove webpack from one of my react projects as dependencies slow down performance and I wasn't really using it. I tried npm uninstall -g webpack, npm uninstall webpack, npm uninstall webpack webpack-cli, npm remove webpack, etc. I ran npm start after each of these commands to start working on my app again and every time I got the same exact answer: "Error: cannot find module 'webpack'". It seems to be based in the internal loader for the react-scripts but I don't know how to edit that. Thank you in advance for any help you can provide. Note: I did check my dependencies and webpack is not there in either the main or developer dependencies
Since you said something about react-scripts, i'll assume you are using CRA.
The whole build process is inside the react-scripts package, which means that you would need to NOT use react-scrips on you start and build scripts. If you get rid of react-scripts you might be able to get away with webpack.

Gulp install on Windows (Npm issue)

I'm trying to install Gulp for my Angular UI project and I'm a bit surprised by the fact that it won't install due to it's dependencies. So, node installed fine, but npm.js refuses to install due to file path too long error. My folder structure is 75 characters long, of the 260 available characters, that leaves 185 characters for npm to use. Am I missing something here, or do the npm authors expect me to fire up a linux box for my UI? (A deal breaker)
Update:
What is the best way to install gulp as a dependency for my Angular UI project? (My goal is to ultimately have gulp become part of my TFS CI)
Ignoring your path length problem for now (you may want to split your question), as far as how to get gulp installed, you just need to include it in your package.json file as a dependency.
You can do that by running npm install --save gulp
However, that does need npm installed first.
The easiest way to do this is to download and install Node from:
https://nodejs.org/en/download/
This will install Node and npm globally, which should avoid your path length problem and in my experience is the standard approach (I've not worked with TFS, but all other CI pipelines I've worked with support Node via a container image or build option/step).
If you dont want to manually install Node, you can use something like Chocolatey to install it automatically (you can install Chocolatey from https://chocolatey.org/ and then you can run choco install nodejs from your command line).

Why is it recommeneded to install via bower or npm?

This might be a stupid question but I believe I should know this since I am just starting out in the web development field rather than just assuming. I normally see this
Install via npm or bower (recommended) or manually download the package
or something of that sorts. My Assumption is that the node_module and bower_component updates the packages automatically, however I am not sure.
Sometimes I install with npm or bower, or sometimes I just mannually download the package to which I have seen no difference. Could someone please tell me why it is important to install via npm or bower so I can know for sure what is going on.
Package managers allow you to keep third party code separate from your code and have consistent versions of that code. With npm or bower you can set out exactly what dependencies you project has, and what versions through a single file, without having to bloat your codebase with the dependencies themselves.
This means that anyone who wants to set up the project can just download the core code and run npm install or the equivalent command, and install all the dependencies at the latest supported version.