JavaScript Tools

Context: frontend-dev-bookmarks / Workflow
Tools for static analysis, pre and post processing of JavaScript files.

Babel: Babel is a generic multi-purpose compiler for JavaScript. Using Babel you can use (and create) the next generation of JavaScript, as well as the next generation of JavaScript tooling.
- Full-Stack Redux Tutorial: We will go through all the steps of constructing a Node+Redux backend and a React+Redux frontend for a real-world application, using test-first development.
- JavaScript Transpilers: What They Are & Why We Need Them: Learn how to use Babel, and what has to do with the future of JavaScript.
Closure Compiler: The Closure Compiler parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what’s left. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls.
Flow: Flow is a static type checker for JavaScript. It can be used to catch common bugs in JavaScript programs before they run.
JSCodeshift: Codemods are tools that assist large-scale, partially automatable codebase refactoring. JSCodeshift is a toolkit for running codemods over multiple JS files.
- Turbocharged JavaScript Refactoring with Codemods: Joe Lencioni describes how they used codemods to transform a large JavaScript code base at AirBnB
JavaScript Code Linting: Linting is the process of running a program that will analyse code for potential errors.
- ESLint: The pluggable linting utility for JavaScript and JSX.
- JSHint: JSHint is a tool for more flexible static analysis of JavaScript programs.
- JSLint: JSLint is a tool for detecting errors or problems by static analysis of JavaScript programs.
- JSLint, JSHint and ESLint Error Explanations: JSLint Error Explanations is designed to help you improve your JavaScript by understanding the sometimes cryptic error messages produced by JSLint, JSHint and ESLint, and teaching you how to avoid such errors.

Module Bundlers and Loaders: Libraries for bundling JavaScript Modules into one or several files.

Browserify: Browserify lets you require(‘modules’) in the browser by bundling up all of your dependencies.
- Budo: A browserify development server, focused on incremental reloading, LiveReload integration (including CSS injection), and other high-level features.
- Watchify: Watch mode for browserify builds.

  <li>
    <strong>CrapLoader</strong>: The goal of crapLoader is to load ads, widgets or any JavaScript code with document.write in it. This library hijacks document.write and delegates the content loaded from each script into the correct position.
  </li>
  <li>
    <strong>Modules Webmake</strong>: A CommonJS module bundler similar to Browserify but much faster due to different requirements finder.
  </li>
  <li>
    <strong><a rel="nofollow noopener" target="_blank" href="http://requirejs.org/">Require.js</a></strong>: RequireJS is a JavaScript file and AMD module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments.
  </li>
  <li>
    <strong><a rel="nofollow noopener" target="_blank" href="http://stuk.github.io/require1k/">Require1k</a></strong>: CommonJS require for the browser in 1KB, with no build needed.
  </li>
  <li>
    <strong><a rel="nofollow noopener" target="_blank" href="http://rollupjs.org/">Rollup.js</a></strong>: Rollup is a next-generation JavaScript module bundler. Author your app or library using ES2015 modules, then efficiently bundle them up into a single file for use in browsers and Node.js.
  </li>
  <li>
    <strong>SystemJS</strong>: Universal dynamic module loader &#8211; loads ES6 modules, AMD, CommonJS and global scripts in the browser and NodeJS. Works with both Traceur and Babel.</p> <ul dir="auto">
      <li>
        <strong><a rel="nofollow noopener" target="_blank" href="http://www.sitepoint.com/modular-javascript-systemjs-jspm/">Modular JavaScript: A Beginners Guide to SystemJS & JSPM</a></strong>: The combination of jspm and SystemJS provides a unified way of installing and loading dependencies.
      </li>
    </ul>
  </li>
  
  <li>
    <strong>URequire</strong>: The Ultimate JavaScript Module Builder & Automagical Task Runner.
  </li>
  <li>
    <strong><a rel="nofollow noopener" target="_blank" href="http://webpack.github.io/">Webpack</a></strong>: Webpack is a module bundler. It takes modules with dependencies and generates static assets representing those modules.</p> <ul dir="auto">
      <li>
        <strong><a rel="nofollow noopener" target="_blank" href="https://medium.com/seek-ui-engineering/block-element-modifying-your-javascript-components-d7f99fcab52b">Block, Element, Modifying Your JavaScript Components</a></strong>: Mark Dalgleish is discussing how to organize React code with BEM and build everything with Webpack.
      </li>
      <li>
        <strong><a rel="nofollow noopener" target="_blank" href="http://dapperdeveloper.com/2016/05/18/developing-with-docker-and-webpack/">Developing with Docker and Webpack</a></strong>: Chris Harrington explains how to create a development environment with Webpack and Docker to match the production as much as possible.
      </li>
      <li>
        <strong><a rel="nofollow noopener" target="_blank" href="http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html">Full-Stack Redux Tutorial</a></strong>: We will go through all the steps of constructing a Node+Redux backend and a React+Redux frontend for a real-world application, using test-first development.
      </li>
      <li>
        <strong><a rel="nofollow noopener" target="_blank" href="http://www.davidmeents.com/how-to-set-up-webpack-image-loader/">How to Set Up Webpack Image Loader</a></strong>: This brief tutorial will help you set up an image loader in Webpack.
      </li>
      <li>
        <strong><a rel="nofollow noopener" target="_blank" href="http://www.robinwieruch.de/the-soundcloud-client-in-react-redux/">The SoundCloud Client in React + Redux</a></strong>: After finishing this step by step tutorial you will be able to author your own React + Redux project with Webpack and Babel.
      </li>
      <li>
        <strong><a rel="nofollow noopener" target="_blank" href="http://survivejs.com/webpack/">Webpack from Apprentice to Master</a></strong>: The purpose of this guide is to help you get started with Webpack and then go beyond basics.
      </li>
      <li>
        <strong><a rel="nofollow noopener" target="_blank" href="http://www.webpackbin.com/">WebpackBin</a></strong>: A webpack code sandbox.
      </li>
      <li>
        <strong><a rel="nofollow noopener" target="_blank" href="http://devlog.disco.zone/2016/06/01/webpack/">Why I think Webpack is the Right Approach To Build Pipelines</a></strong>: Thomas Boyt compares how Grunt, Gulp, Broccoli and Webpack discover dependencies.
      </li>
    </ul>
  </li>
</ul>

Regenerator: This package implements a source transformation that takes the proposed syntax for generators/yield from future versions of JS and spits out efficient JS-of-today (ES5) that behaves the same way.

License

This work is licensed under a Creative Commons Attribution 4.0 International License.
Please provide a link back to this repository. This is not necessary for GitHub forks.