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

General Notes

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

• npm install <package-name>: Installs the package and saves it to dependencies (default behavior)
  • 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 for development-only tools
• npm install <package-name> --global or -g: Installs the package globally on your system, not tied to a specific project

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.