Tag Archives: webpack

Learn Raw React — no JSX, no Flux, no ES6, no Webpack…


via Learn React By Itself — no JSX, no Flux, no ES6, no Webpack..

So you’ve heard all the fuss about React.js – apparently it is the best thing since XMLHttpRequest. But you’ve spent a couple hours investigating, only to find so many buzzwords that it just feels overwhelming. JSX and flux and ES6 and webpack and react-router and all I want is somebody to just tell me how to useReact already!

Luckily for you, that’s exactly what this series will do! Don’t believe me? That’s OK – you will after you’ve built your first React app in about 2 minutes time. Without downloading anything. Just by following this exercise:

Beginner’s guide to Webpack


via Beginner’s guide to Webpack — Medium.

Click here to go to the final Github repo.

Webpack is the latest and greatest in front-end development tools. It is a module bundler that works great with the most modern of front-end workflows including Babel, ReactJS, CommonJS, among others. As a beginner to Webpack, this is what I have learned.

Building a Date Picker with ReactJS


via Building a Date Picker with React JS | Codementor.

I’ve recently been a pretty big fan of React JS and have been building most of my newer projects using it in combination with LESS and Webpack (both of which are awesome, although I hear the former is a little out of fashion in lieu of SCSS these days). Today, I’m going to be writing about how to create a date picker using React. I’ve made the source available and even published a bower package (a-react-datepicker) in the event you want to use it in your fancy new React project.

React CSS Modules: Seamless mapping of class names to CSS modules inside of React components.


via gajus/react-css-modules · GitHub.

React CSS Modules implement automatic mapping of CSS modules. Every CSS class is assigned a local-scoped identifier with a global unique name. CSS Modules enable a modular and reusable CSS!

ECMAScript 6 Tools: An aggregation of tooling for using ES6 today


Transpilers

  • Babel – Turn ES6+ code into vanilla ES5 with no runtime
  • Traceur compiler – ES6 features > ES5. Includes classes, generators, promises, destructuring patterns, default parameters & more.
  • es6ify – Traceur compiler wrapped as a Browserify v2 transform
  • babelify – Babel transpiler wrapped as a Browserify transform
  • es6-transpiler – ES6 > ES5. Includes classes, destructuring, default parameters, spread
  • Square’s es6-module-transpiler – ES6 modules to AMD or CJS
  • Facebook’s regenerator – transform ES6 yield/generator functions to ES5
  • Facebook’s jstransform – A simple utility for pluggable JS syntax transforms. Comes with a small set of ES6 -> ES5 transforms
  • defs – ES6 block-scoped const and let variables to ES3 vars
  • es6_module_transpiler-rails – ES6 Modules in the Rails Asset Pipeline
  • Some Sweet.js macros that compile from ES6 to ES5
  • Bitovi’s transpile – Converts ES6 to AMD, CJS, and StealJS.
  • regexpu — Transform Unicode-aware ES6 regular expressions to ES5

Build-time transpilation

Grunt Tasks

Gulp Plugins

Broccoli Plugins

Brunch Plugins

Webpack plugins

Duo plugins

Connect plugins

Gobble plugins

Jade plugins

Jest plugins

Karma plugins

Sprockets plugins

Browser plugins

  • Scratch JS – A Chrome/Opera DevTools extension to run ES6 on a page with either Babel or Traceur

Mocha plugins

  • Mocha Traceur – A simple plugin for Mocha to pass JS files through the Traceur compiler

Module Loaders

  • ES6 Module Loader polyfill (compat with latest spec and Traceur)
  • js-loaders – Mozilla’s spec-compliant loader prototype
  • JSPM – ES6, AMD, CJS module loading/package management
  • Module Loader for webpack
  • beck.js – toolkit for ES6 Module Loader pipelines, shim for legacy environments

Boilerplates

  • es6-boilerplate – Tooling to allow the community to use es6 now via traceur in conjunction with amd and browser global modules, with source maps, concatenation, minification, compression, and unit testing in real browsers.

Code generation

Polyfills

Editors

Parsers

Other

Part 1: From RequireJS to Webpack


via Jamund’s Coding Blog: From Require.js to Webpack – Part 1 (the reasons).

Wherein I layout all of the reasons why we decided to move off of require.js and on to webpack.

About 2 months ago we completed a migration from require.js to webpack. Require.js had been the primary UI module system at PayPal and was baked into the default template kraken server we use to build our applications. Everyone was familiar with it and it worked pretty well. Despite our success with it, I identified a few features that were provided by webpack that ultimately led my team to migrate off of require.js. This is an overview of the reasons why we chose webpack.

I hope this proves helpful to you as you seek to improve your own module/build systems!

Part 2: From RequireJS to Webpack


via From Require.js to Webpack – Part 2 (The How) | PayPal Engineering Blog.

This is the follow up to a post I wrote recently called From Require.js to Webpack – Part 1 (the why) which was published in my personal blog.

In that post I talked about 3 the main reasons my team decided to move from require.js to webpack:

  1. CommonJS support
  2. NPM support
  3. a healthy loader/plugin ecosystem.

Despite the clear benefits in developer experience (DX) the setup was fairly difficult and I’d like to cover some of the challenges we faced to make the transition a bit easier.