npm & vite notes - robbiehume/CS-Notes GitHub Wiki

General Notes

  • nodemon is a package that automatically restarts a program when a file changes

npm

Common npm commands

  • Install all dependencies: npm install
  • Install a specific package: npm install <package-name>
  • Uninstall a package: npm uninstall <package-name>
  • Update all packages: npm update
  • Run a script: npm run <script-name>
  • Build for production: npm run build
  • Start development server: npm run dev
  • List installed packages: npm list

Installing dependencies

  • Can do i instead of install, as it's an alias for it
  • npm install <package-name>: Installs the package locally and saves it to dependencies (default behavior) in package.json
    • npm install <package-name> --save: Legacy command that did the same as the default in modern npm (no longer needed)
  • npm install <package-name> --save-dev: Installs the package and saves it to "devDependencies" field in package.json for development-only tools
    • Ex: npm install nodemon --save-dev
  • npm install <package-name> --global or -g: Installs the package globally on your system, not tied to a specific project
  • npm install or npm i: install all packages in package.json
  • npm install --production: install all packages in package.json, except for "devDependencies"
  • Because of this convenient command, it is recommended that you do not include your local node_modules/ folder in any repository that you use to store and share your code to avoid taking up precious storage resources

Versions

  • Change version: npm version 1.0.0 (replace 1.0.0 with your version)
  • Get version: npm pkg get version   // "1.0.0"
    • Remove "" from version output: version=npm pkg get version | tr -d '"'   // 1.0.0
    • Convert to short version: ${version%.*}   // 1.0

npm vs npx

  • npx (Node Package eXecute): is used for executing packages directly from the npm registry or your local node_modules folder without needing to install them globally
  • Key differences:
    • Feature npm npx
      Primary Purpose Manage packages and dependencies Execute packages directly
      Installation Requirement Typically requires installing packages Can execute without installing packages
      Use Case Managing and installing packages Running one-off commands or CLI tools
      Command Execution Cannot execute packages directly Can execute packages or commands directly
      Temporary Installation No Yes (installs temporarily, then removes)

package.json vs package-lock.json

These files work together to manage your project’s dependencies effectively

package.json

  • Purpose: The main file for your project. It contains metadata like the project name, version, and a list of dependencies.
  • Version Control: Defines version ranges for dependencies (e.g., ^4.17.1).
  • Usage: Managed by the developer to add dependencies, scripts, and other project configurations.

package-lock.json

  • Purpose: Automatically generated by NPM to lock the exact versions of all installed dependencies, including nested ones.
  • Version Control: Ensures consistent installs across different environments by locking down exact versions (e.g., 4.17.1).
  • Usage: Should be committed to version control to maintain consistency.

Key Differences:

  • package.json is for defining dependencies and project settings.
  • package-lock.json is for locking down the exact versions of those dependencies to ensure consistency.

jsconfig.json vs vite.config.js:

Both files help streamline development but serve different purposes—one for the editor and the other for the build process

jsconfig.json

  • Purpose: Configures JavaScript language features and path aliases for your editor (like VSCode).
  • Usage: Helps the editor understand the structure of your project, enabling features like IntelliSense, path aliasing, and project-wide type checking.
  • Key Features:
    • Path Aliases: Defines aliases for directories to simplify imports (e.g., @/components).
    • Compiler Options: Configures options like ES module support or JSX.

vite.config.js

  • Purpose: Configures Vite, a build tool for front-end projects.
  • Usage: Controls how Vite builds and serves your project, including plugins, aliases, and server configurations.
  • Key Features:
    • Plugins: Allows customization of the build process with plugins.
    • Aliases: Similar to jsconfig.json, but for build-time path resolution.
    • Server Settings: Configures development server options, such as port and proxy settings.

Key Difference:

  • jsconfig.json is mainly for improving the developer experience in the editor.
  • vite.config.js is for configuring the build and development process of your project with Vite.