webpack npm cli interactive help - sgml/signature GitHub Wiki

Basic npm

Run npm ping (https://docs.npmjs.com/cli/ping) to test the connection to the URL of the registry

Run npm install foo to download a package which is one of the main dependencies

Run npm ci with the foreground option set to true to debug preinstall and postinstall script runtime errors

Run npm view webpack to see the release date of webpack@3

Run npm view babel-loader (https://docs.npmjs.com/cli/view) to view the babel-loader release dates

Run npm install [email protected] --save-dev, where x.x.x is the version number with the closest release date to webpack@3

Run npm explore webpack to customize the webpack package.json in a subshell (https://docs.npmjs.com/cli/explore)

Run npm docs webpack (https://docs.npmjs.com/cli/docs) to view the webpack docs

Run npm prune (https://docs.npmjs.com/cli/prune) to remove any unused packages

Run npm doctor to scan for vulnerabilities in installed packages

Run npm outdated to scan for outdated packages

Run npm dedupe (https://docs.npmjs.com/cli/dedupe) to remove any duplicate packages

Run npm rebuild (https://docs.npmjs.com/cli/rebuild) to rebuild all the packages

Run npm shrinkwrap (https://docs.npmjs.com/cli/shrinkwrap) to lock down all the package files by version number

Check the shrinkwrap docs (http://npm.github.io/using-pkgs-docs/shrinkwrap/) for shrinkwrap troubleshooting

Check the troubleshooting page (https://docs.npmjs.com/troubleshooting/common-errors) for any error messages

Dependency Hell

Research github issues for 'breaking changes':

css-loader

Feature css-loader 5.x css-loader 6.x URLs
Webpack Version Requirement Compatible with Webpack 4 and 5 Requires Webpack 5 GitHub Issue - Webpack Compatibility
URL Handling Basic URL handling Updated URL handling, more control options GitHub Issue - URL Handling
CSS Modules Basic CSS Modules support Enhanced CSS Modules support GitHub Issue - CSS Modules
Breaking Changes Fewer breaking changes Some breaking changes, requires updates GitHub Issue - Breaking Changes

Yarn

Installation Script

import subprocess
import os

def install_yarn():
    try:
        # Update package list and install Yarn
        subprocess.run(['sudo', 'apt-get', 'update'], check=True)
        subprocess.run(['sudo', 'apt-get', 'install', '-y', 'yarn'], check=True)

        # Add Yarn to the PATH environment variable
        yarn_path = '/usr/local/share/.config/yarn/global/node_modules/.bin'
        bash_profile = os.path.expanduser('~/.bash_profile')

        with open(bash_profile, 'a') as file:
            file.write(f'\nexport PATH="$PATH:{yarn_path}"\n')

        # Source the bash profile to apply changes
        subprocess.run(['source', bash_profile], shell=True, check=True)

        print('Yarn installed and PATH updated successfully.')

    except subprocess.CalledProcessError as e:
        print(f'An error occurred: {e}')

if __name__ == '__main__':
    install_yarn()

NVM Installation of Latest Minor version given a Major version

import subprocess
import sys
import requests

def get_latest_minor_version(major_version):
    url = f"https://nodejs.org/dist/index.json"
    response = requests.get(url)
    versions = response.json()  # Convert response to a list
    minor_versions = []

    for version_info in versions:
        version = version_info['version']
        if version.startswith(f'v{major_version}.'):
            minor_version = int(version.split('.')[1])
            minor_versions.append(minor_version)

    latest_minor_version = f"{major_version}.{max(minor_versions)}"
    return latest_minor_version

def install_node_version(major_version):
    latest_minor_version = get_latest_minor_version(major_version)
    try:
        # Use nvm to install the latest minor version of the given major version
        subprocess.run(f'source ~/.nvm/nvm.sh && nvm install v{latest_minor_version}', shell=True, executable='/bin/bash')
    except subprocess.CalledProcessError as e:
        print(f"An error occurred during the installation process: {e}")

if __name__ == "__main__":
    if len(sys.argv) != 2:
        print("Usage: python3 install_node_version.py <major_version>")
        sys.exit(1)

    major_version = sys.argv[1]
    install_node_version(major_version)

Basic Yarn

Run yarn why npm to find all of its dependents

Write a script to convert from npm to yarn:

import json
import re

def convert_npm_to_yarn(package_json_path):
    # Define dictionaries for npm to yarn command mapping
    npm_to_yarn = {
        'npm start': 'yarn start',
        'npm run build': 'yarn build',
        'npm test': 'yarn test',
        # Add more mappings as needed
    }

    try:
        # Read the package.json file
        with open(package_json_path, 'r') as file:
            data = json.load(file)

        # Convert npm scripts to yarn scripts using regex
        scripts = data.get('scripts', {})
        new_scripts = {}

        for key, value in scripts.items():
            for npm_cmd, yarn_cmd in npm_to_yarn.items():
                value = re.sub(npm_cmd, yarn_cmd, value)
            new_scripts[key] = value

        # Update the package.json data
        data['scripts'] = new_scripts

        # Write the updated data back to the package.json file
        with open(package_json_path, 'w') as file:
            json.dump(data, file, indent=2)

        print(f"Successfully converted npm scripts to yarn scripts in {package_json_path}")
    
    except Exception as e:
        print(f"An error occurred: {e}")

if __name__ == "__main__":
    package_json_path = 'path/to/your/package.json'  # Update with the actual path to your package.json file
    convert_npm_to_yarn(package_json_path)

Basic PNPM

One of the best features of pnpm is that in one project, a specific version of a package will always have one set of dependencies. There is one exception from this rule, though - packages with peer dependencies.

Transpiled Output

  1. Create a npm script:
{
  "scripts": {
    "transpile": "nuxt generate && mv dist/index.html output.html && mv output.html ."
  }
}
  1. Run it: npm run transpile

Basic Webpack

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

Scaffolding

Grunt	                                   Webpack
grunt-contrib-copy	                   CopyWebpackPlugin
grunt-contrib-jshint	                   eslint-loader
grunt-contrib-sass	                   sass-loader
grunt-contrib-watch	                   Built-in; Use WatchIgnorePlugin to whitelist excluded files

karma-ng-html2js-preprocessor	           react-markdown
karma-ng-json2js-preprocessor	           JSONPTemplatePlugin(https://webpack.js.org/plugins/internal-plugins/#jsonptemplateplugin)

grunt-contrib-clean	                   CleanWebpackPlugin
grunt-useref	                           html-loader options (https://github.com/kangax/html-minifier#options-quick-reference)
grunt-remove-logging	                   Babel; set the comments config key to false
grunt.registerTask	                   apply-loader(https://github.com/mogelbrod/apply-loader)
grunt.file.copy                            CopyWebpackPlugin; Use transform (https://github.com/webpack-contrib/copy-webpack-plugin/blob/master/README.md#transform)

Dependency Tools

Command Description Example Usage
ncu Checks the latest versions of all project dependencies ncu
ncu -u Upgrades package.json to the latest versions ncu -u
ncu -g Checks global packages ncu -g
ncu --interactive Interactive mode to choose which packages to update ncu --interactive
ncu --filter Filters packages to include only specific packages ncu --filter mocha
ncu --reject Excludes specific packages from being updated ncu --reject nodemon
ncu --format Formats the output (e.g., group) ncu --format group
ncu --pre Includes prerelease versions ncu --pre
ncu --doctor Iteratively installs upgrades and runs tests to identify breaking upgrades ncu --doctor

Similar tools:

Tool Description Example Usage
npm-check-updates Checks the latest versions of all project dependencies ncu
npm-check Lists outdated, incorrect, and unused packages npm-check
npm-outdated Lists packages that are out of date npm outdated
yarn upgrade Upgrades packages to their latest versions yarn upgrade
pnpm update Updates packages to the latest versions pnpm update
depcheck Detects unused and missing dependencies depcheck
greenkeeper Automatically keeps your project dependencies up-to-date greenkeeper
renovate Automated dependency updates with customizable rules renovate

Architecture

Broccoli works by managing a set of directories, connected together by plugins, which describe how files are moved or transformed at each step of the build process. Broccoli ensures plugins are called in the prescribed order, and writes the result to a target directory. Each plugin is responsible for processing files passed to it in input directories, and writing files to its output directory. This allows you to focus on the transformations and not how files are passed between each plugin.

For example:

app                                                       [target]
 ├─ src                                                    │
 │   ├─ index.js   --> ConcatPlugin() ┐                    │
 │   └─ other.js                      ├─ MergePlugin() --> ├─ prod.js
 └─ styles                            │                    └─ site.css
     ├─ site.scss  --> SassPlugin() ──┘
     └─ layout.scss

Dockerization

FROM node:10
# use the latest LTS (long term support) version 10 of node

WORKDIR /usr/src/app
# the working directory for your application

COPY package*.json ./
# copy both package.json and package-lock.json

RUN npm install
# RUN npm ci --only=production for production only

COPY . .
# Bundle app source

EXPOSE 8080
# map port 8080 to the docker daemon

CMD [ "node", "server.js" ]

dockerignore

touch .dockerignore

Create a .dockerignore file in the same directory as your Dockerfile with following content:

  • node_modules
  • npm-debug.log

This will prevent your local modules and debug logs from being copied onto your Docker image and possibly overwriting modules installed within your image.

Hardening

Building your image

Go to the directory that has your Dockerfile and run the following command to build the Docker image. The -t flag lets you tag your image so it's easier to find later using the docker images command:

docker build -t <your username>/node-web-app .

Your image will now be listed by Docker:

$ docker images

Example

REPOSITORY                      TAG        ID              CREATED
node                            10         1934b0b038d1    5 days ago
/node-web-app    latest     d64d3505b0d2    1 minute ago
Run the image
Running your image with -d runs the container in detached mode, leaving the container running in the background. The -p flag redirects a public port to a private port inside the container. Run the image you previously built:

docker run -p 49160:8080 -d <your username>/node-web-app

Print the output of your app:

Get container ID

$ docker ps

Print app output

$ docker logs <container id>

Example

Running on http://localhost:8080 If you need to go inside the container you can use the exec command:

Enter the container

$ docker exec -it <container id> /bin/bash

Test

To test your app, get the port of your app that Docker mapped:

$ docker ps

Example

ID IMAGE COMMAND ... PORTS ecce33b30ebf /node-web-app:latest npm start ... 49160->8080 In the example above, Docker mapped the 8080 port inside of the container to the port 49160 on your machine.

Cross-Browser Parity Testing

  1. Run in IE11, Chrome, and Firefox
  2. Copy/Paste polyfills as an unminified script tag in index.html, then remove them one-by-one
  3. Find the corresponding npm polyfills, then replace the copy/paste code with the minified generated code
  4. Find the server.js source code and change its options to resolve server-side regressions

Cross-Project Parity Testing

  1. Run the scaffold project A
  2. Run the real project B
  3. Compare the directory structure of project A to project B
  4. Copy hidden or missing node_modules from project A to project B
  5. Run the binaries in the node_modules/.bin directory directly without npm run or npm run-script to create config files

Defensive Programming

References

Migration

Legacy Mapping

Middleware Security

Environment Variables

Issues

Mocking

HTML Email

https://blog.edmdesigner.com/css-inliner-tools-in-email/ https://www.smashingmagazine.com/2017/01/introduction-building-sending-html-email-for-web-developers/

CSS

Concatenation

Specs

Benchmarking

Malware

Plugin Dev

Transitive Dependencies

Dev Server

Aliasing

Localhost

Trends

Optimization

Deployment

Transpilers

Transpiler Plugins

Internal Defaults

Continuous Integration

Subsetting

Feature Detection

Customization

Vite/Webpack

Troubleshooting

Error Codes

Snippets

    // Copy .html and .css from src/ folder to default target in webpack
    plugins: [
        new copyWebpackPlugin([
                {
		    context: 'src/',
		    from: '*.css'
                },
		{
		    context: 'src/',
		    from: '*.html'
                }
            ])
        ],

Games

⚠️ **GitHub.com Fallback** ⚠️