all I need to know about javascript tools (npm, bower, webpack, babel, gulp and grunt)

ALL I CAN SAY IS THIS… DEVELOPING JAVASCRIPT IS INCREDIBLY FUCKING ANNOYING WHEN YOU HAVE NO IDEA WHAT THE FUCK IS GOING ON. I take that back. ITS INCREDIBLY FUCKING ANNOYING NO MATTER WHAT. There are so many tools, AND SO LITTLE VALUABLE INFORMATION OUT THERE. What if I really want to build an awesome front-end application with real-WORLD javascript tools, what’re my options to learn how to do it?? THERE AIN’T SHIT OUT THERE, THEY ALL DUMB IT DOWN BECAUSE IT’S TOO FUCKING SHITTY OF A SETUP WITH TOO MANY FUCKING WAYS TO FUCK IT ALL UP. ALL I WANT TO DO IS NPM INSTALL ANGULARJS AND THEN FUCKING USE IT IN MY APPLICATION. IS THAT SO HARD? I’m gonna ask this question on StackOverflow and get berated… here goes. I don’t know if any of the following is right, it’s my current understanding.

redirect with javascript

http://stackoverflow.com/questions/503093/how-do-i-redirect-to-another-page-in-jquery

nodemon

nodemon listens to the file system and restarts the server when a file changes.

forever

forever restarts the server is there is an exception that kills your server.

npm

NPM manages dependencies. npm is used to manage your dev dependencies, it can also manage your dependencies. It also manages the scripts you need to run when you deploy, I’m pretty sure. It also contains your start script. Your start script can then reference a gulp script. That gulp script can then transpile all sorts of code into code that browsers can understand. This is all incredibly fucked when you think about it.

import

Importing files is super important.

examples

import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import store from './store';
import store, { history } from '.store';

import store without the brackets means it is the default export. With the brackets means it is a named export.

Webpack

It’s the future. It replaces Browserfy, Bower? Maybe? Not usre. Webpack can replace gulp and grunt for the most part (thank fucking god).

Here’s an amazing doc on webpack. https://github.com/petehunt/webpack-howto

Here’s a great video tutorial on webpack, es6, babel, react, react-router, redux and react-redux. https://www.youtube.com/watch?v=DfRibIkjhew

webpack.config.js configures webpack. Put it in your root directory.

The basic idea is to write a bunch of small javascript files so that humans can read it. Then Webpack will combine all your small javascript files into a massive javascript file so there is just one http request for browsers, and once again, humans are happy because the page loads FASTER.

Source Maps

One giant compiled js file can cause problems, however. The problem is, if we have a problem in production, how can you debug the error when google chrome dev tools only knows about the massive massive js file that you uploaded to your production server? Well the solution to that is a source map. A Source Map tells google chrome dev tools where the fucked up line of code came from.

webpack.config.js

module.exports = {
    entry: "./app/app.js",
    output: {
        filename: "./bundle.js",
        sourceMapFilename: "./bundle.map"
    }
    devtool: '#source-map'
}

The source map is the .map file. LOL DOY.

Importing with es6

import React from 'react';
import ReactDOM from 'react-dom';
import { method1, method2 } from 'SomeOtherModuleSpecifiedInNodeModules'

Ensure you have ‘react’ specified in your package.json. The import name must match what is specified in package.json.

Importing from Custom Components

import FirstComponent from './first-component';

Why don’t I need to specify a .js or .jsx file extension? Some config in webpack will do that for you.

BUT FOR THE MOST PART FUCK THAT METHOD BECAUSE YOU CAN HANDLE ALL THIS WITH webpack.config.js. Check resolve below.

var path = require('path');

module.exports = {
    entry: "./app/app.js",
    output: {
        filename: "./bundle.js",
        sourceMapFilename: "./bundle.map"
    },
    devtool: '#source-map',
    module: {
        loaders: [
            {
                loader: 'babel',
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                query: {
                    presets: ['react', 'es2015', 'stage-2']
                }
            }
        ]
    },
    resolve: {
        root: path.resolve('./app'),
        extenstions: ['', '.js']
    }
}

Exporting your Custom Components

import React from 'react';

class FirstComponent extends React.Component {
  render() {
    return (
      <div>Hello Bitches</div>
    )
  }
}

export default FirstComponent;

Webpack Commands

$ webpack

This runs through webpack.config.js and does all the shit you’ve programmed it to do.

Bower

Fuck bower. Bower is another beast. Supposedly it is used to manage the files you’re actually going to use withing your application. I think you still have to include them in your index file. I need a friend who is a real ass mother fucking front end developer.

Gulp.js and Grunt.js

If They’re basically server the same function in a little bit different ways. They run tasks for you that simplify your life, supposedly. Things like minification, transpilation and others. Gulp is newer and the current hot-commodity in this realm.

Deploying to Heroku

This is just conceptual, not actual code. Heroku will start with first look at your package.json file. This is created by npm. Then it will look for a start script. It will then run the start script.

Post Content