Preamble

The ES2015 Crash Course video series mostly has to do with the basics of ES6, and all of that is still relevant and hasn't changed. However, when it comes to the tools used to impliment ES6, even in Laravel, the instructions given in this video series are out of date.

Once I got to the Rollup video, I decided to start documenting any differences I found so I could post them here and share with anyone else going through this series. I'll update this post as I find more things to add. For now at least it'll be focused around mainly the videos titled "ES6 Compilation With Laravel Elixer", "Module Bundling With Rollup" and "Module Bundling With Webpack". I wasn't sure which "channel" to put this in: Guides, Tips, and JavaScript all seem appropriate.

ES6 Compilation With Laravel Elixer

Laravel Elixer is now called Laravel Mix and it works a bit differently from the way that Jeffrey illustrates in the video.

You'll find Laravel Mix in webpack.mix.js at the root of your Laravel project directory. In order to get started, first you have to install Laravel Mix. Luckily, this is already set up for you. All you have to do is run npm install. This installs all the packages listed in your projects package.json file.

Laravel Mix does not have Laravel Elixer's browserify method. Instead you can use its js method for compiling the JavaScript. For this method, you'll need to specify both an entry file (along with its path) and an output folder in the webpack.mix.js file like so,

mix.js('resources/js/main.js', 'public/js');

If you want to add your main.js file without removing the other default mix methods, you just chain it along with the rest.

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .js('resources/js/main.js', 'public/js');

You need to run npm run dev in order to compile your files. After that you should see a main.js file in public/js just like in Jeffrey's example.

Module Bundling With Rollup

In this lesson Jeffrey instructs you to run Rollup with the command rollup src/main.js saying that this will output the resulting transformed code.

However, if you try to run that you'll get the error Error: You must specify output.format. You can go to the documentation for Rollup to read about the different file formats. If you run rollup src/main.js --format umd, you'll see the output that you expect from the video lesson.

Next Jeffrey will instruct you to output the result to a file with the command rollup src/main.js > src/main.dist.js and you run into the same issue. In order to get it to work, just run the same command with the necessary flag and file format: rollup src/main.js > src/main.dist.js --format umd.

Later when teaching about the rollup.config.js file, you run into the same issue which can be solved in the same way. However now you have the additional option of specifying the format type within your config file like so,

import buble from 'rollup-plugin-buble';

export default {
    entry: 'src/main.js',
    format: 'umd',
    plugins: [buble()]
}

Module Bundling With Webpack

In this lesson you can avoid problems by simply installing the same version of Webpack as Jeffrey installs (2.1). However, as you'll likely want to learn how to do things with the most recent version of Webpack (4.26) I'll go over that.

Webpack no longer works out of the box from the command line. You need to install a separate package. Luckily, if you try to run Webpack as instructed in the video, you'll be greeted with this prompt:

Simply answer with "yes". After it installs it will try to run webpack and will show you an error like this.

You can see that Webpack definitely works a lot differently these days. It says that the 'mode' option needs to be set, and it says that it is unable to resolve ./src. What's actually happening here is that if not given any commands by default Webpack looks for ./src/index.js. As we haven't made that file, it can't find it. Nonetheless now you can run the command line commands using either webpack or webpack-cli (they both result in the same thing), and you can continue on with the lesson.

Jeffrey will instruct you to run ./node_modules/.bin/webpack src/main.js dist/main.js. However, if you try to run that command you'll get an error that says, ERROR in multi ./src/main.js dist/main.js Module not found: Error: Can't resolve 'dist/main.js' This is because output files now need to be added using the flag --output. If no output is specified, webpack will automatically bundle the file into a dist folder under the same filename. So if you do,

./node_modules/.bin/webpack-cli src/main.js

It will automatically create the file dist/main.js and bunldle your code there by default. If you want to specify a custom output location you can do so like this.

./node_modules/.bin/webpack-cli src/main.js --output custom/output/location/file.js

Incidentally, the reason why the command fails is that now Webpack accepts multiple entrypoints.

./node_modules/.bin/webpack-cli src/main.js src/foo.js src/bar.js --output dist.js

If you do this command, Webpack will bundle main.js, foo.js and bar.js all together into a file named dist.js.

If you try to look at dist/main.js the way that Jeffrey does, you'll notice that all of the code is gathered together on one line and very unreadable. This is because Webpack now runs in production mode by default. This is how you would run Webpack in development mode from the command line.

./node_modules/.bin/webpack-cli src/main.js --output dist/main.js --mode development

If you run that command you should see a dist/main.js file that looks more like what is featured in the video lesson.

In the next step, you'll be instructed to make a webpack.config.js file. When you do this, you'll want to add the option mode to the module exports. Additionally, since Webpack now defaults to compiling bundles into a dist folder, if you specify the output filename to be ./dist/main.js the way Jeffrey tells you to, it will actually craete the file in dist/dist/main.js relative to the root of your project. Instead, you'll want to use the following config.

var webpack = require('webpack');

module.exports = {
    entry: './src/main.js',
    mode: 'development',
    output: {
        filename: 'main.js'
    }
}

For the next section where he adds Buble, we run into more problems. Loaders are now put inside a new array called rules, and the loader itself is specified inside a use object. The following configuration file will work as of this writing.

var webpack = require('webpack');

module.exports = {
    entry: './src/main.js',
    mode: 'development',
    devtool: 'source-map',
    output: {
        filename: 'main.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'buble-loader'
                }
            }
        ]
    }
};

For the rest of the lesson Jeffrey reviews how Laravel handles compiling ES6. For this you can see the section for the previous video "ES6 Compilation With Laravel Elixer". The way you need to set up your webpack.mix.js file here is identical to the way you do it there. Jeffrey then serves his example page using the command serve, but if you're on the most recent version of Laravel you'll need to use php artisan serve.

In the video, Jeffrey says that you can pass Webpack config options to the forth argument on the scripts method. This no longer works with Laravel Mix's js method. Instead, if you want to specify your own custom Webpack config options, you need to use Mix's webpackConfig method. Take a look at this example from the official documentation.

mix.webpackConfig({
    resolve: {
        modules: [
            path.resolve(__dirname, 'vendor/laravel/spark/resources/assets/js')
        ]
    }
});

The Laravel Mix documentation is quite good and pretty straightfoward (at least in my opinion), so I encourage you to check it out.