Toolchain

Compiler / Transpiler / Preprocessor

• Babel
  • Setting up ES6
  • Babel User Handbook, Babel Plugin Handbook
  • Presets
    • Preset Env
      • Browserslist
    • Preset React
    • React Optimize
  • Plugins
    • Proposals
      • Babel progress on ECMAScript proposals
      • Shims - @babel/polyfill (useBuiltIns) / core-js
        • async/await - fast-async (NoDent)
      • Stage 3, Stage 2, Stage 1, Stage 0
        • Class properties
        • Object rest spread
        • Legacy Decorator / Stage 2 Decorators
        • Dynamic Import- Syntax, For Node.js
        • Optional Chaining Operator
    • Node.js
      • add-module-exports
      • Root Import / Webpack Alias
    • React
      • JSX Control Statements
      • React CSS Modules
    • Libraries
      • lodash, ramda
    • Optimization
      • transform-remove-console
• TypeScript
  • TypeScript: the missing introduction
• PostCSS
  • Standards
    • Autoprefixer
    • CSSNext / postcss-preset-env
    • Will Change
    • Normalize
  • Utilities
    • Utility Library, Rucksack
    • LostGrid
    • Quantity Queries
    • Easing Gradients
    • Pxtorem
    • Brand Colors / Nippon Color / Google Color
    • Contrast / Get Color
  • Assets
    • Assets
    • Inline SVG, SVGO
    • Font Magician
  • Syntax
    • PreCSS
    • SCSS Parser
    • JS
• node-sass
• PostHTML

Loader / Builder / Bundler

• Webpack
  • webpack-howto
    • SurviveJS Webpack
    • webpack-blocks
  • Loaders
    • babel-loader, ts-loader / awesome-typescript-loader, vue-loader
      • imports-loader
        • Granular Shimming
      • exports-loader
        • Global Exports
    • css-loader, style-loader / isomorphic-style-loader
      • postcss-loader, scss-loader, less-loader
      • resolve-url-loader
    • workerize-loader / worker-loader
    • raw-loader
      • html-loader
        • markdown-loader / handlebars-loader
      • shader-loader / glslify-loader
    • image-webpack-loader / img-loader
    • svg-react-loader, react-markdown-loader
    • url-loader, svg-url-loader
    • file-loader
    • thread-loader, cache-loader, val-loader
  • Plugins
    • Extract Text Plugin, Webpack Manifest Plugin
    • Copy Webpack Plugin, Clean Webpack Plugin
    • HTML Webpack Plugin
      • HTML Webpack Template
      • Plugins
        • Favicons
        • Harddisk
        • Inline Source, Preload
        • Include Assets + Exclude Assets
        • Inline Chunk Manifest
    • Define Plugin / Environment Plugin
    • Provide Plugin
      • Shimming Global
    • Ignore Plugin, Watch Ignore Plugin
    • Module Concatenation Plugin, Lodash Plugin
    • UglifyJS Webpack Plugin / Babel Minify Webpack Plugin
    • Workbox Webpack Plugins, Offline Plugin
    • Bundle Analyzer
    • Fork TS Checker Webpack Plugin, HappyPack
• Rollup
  • Webpack and Rollup: the same but different

Formatter

• ESLint with autofix feature - see Static Analysis
• Prettier
  • prettier-eslint
• Codemod - Effective JavaScript Codemods
  • jscodeshift
  • react-codemod
  • Recast
• stylefmt

Static Analysis

• ESLint
  • ESLint Rules
    • eslint-index, eslint-find-rules
  • Plugins
    • prettier
    • babel, import, eslint-comments, unicorn, no-use-extend-native
    • filenames
      • eslint-import-resolver-webpack
    • compat
    • node, security
    • react, jsx-a11y, graphql, mongodb
    • jsdoc, flowtype
    • jest, ava, mocha, chai-expect
    • fp, lodash, lodash-fp, immutable
    • promise, optimize-regex
  • Presets
    • eslint-config-airbnb
    • eslint-config-react-app
• Flow
  • flow-typed
  • Flow Runtime
• StyleLint
  • doiuse
  • Colorguard
  • postcss-bem-linter
• HTMLHint

Minifier / Compressor / Optimizer

• Prepack
• babel-minify / uglify-es / UglifyJS 3 / UglifyJS 2
• cssnano / clean-css / CSSO
• HTMLMinifier
• Critical / Penthouse
• imagemin
  • gifsicle
  • jpegtran / mozjpeg
  • optipng / pngquant
  • svgo
  • webp
• fontmin, font-spider

Task Automation

• npm-run-script, npm-scripts
  • task automation with npm run, \ How to Use npm as a Build Tool
    • Why I Left Gulp and Grunt for npm Scripts
  • Git Hooks
    • Husky
    • lint-staged
      • Make linting great again!
  • Environment Variables - env-cmd, cross-env
  • get-port, public-ip
• Gulp
  • gulp - The vision, history, and future of the project
  • Why you shouldn’t create a gulp plugin
  • Gulpfile API
  • Utilities
    • The Problem with gulp-util
    • through2, gulp-load-plugins
    • gulp-size, gulp-count, gulp-notify
    • gulp-debug
    • gulp-if, gulp-filter, merge-stream
    • gulp-changed / gulp-cached
    • gulp-exec, gulp-git
    • gulp-rename
    • gulp-replace / gulp-inject / gulp-useref, gulp-inline-source
    • gulp-sourcemaps