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

Basic Yarn

Run yarn why npm to find all of its dependents

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.

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)

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

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** ⚠️