Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Organize + Automate + Deploy = Webpack Chapter 16

Using Babel to compile from ES6

ES6 has a lot of useful features, and in this recipe, you will learn how you can use it in your

projects. It's worth noting that ES6 currently has very good browser support. You won't
have compatibility issues with 80% of the browsers in the wild, but you may need to even

reach people who're still using Internet Explorer 11, depending on your audience, or you
may just want to maximize your audience. Moreover, some tools for development and

Node.js still don't fully support ES6, deeming Babel necessary even for development.

Getting ready

In this recipe, we will use npm and the command line.

How to do it...

Create a new directory with an empty npm project. You can use the npm init -y

command or, if you have Yarn installed, you can use yarn init -y inside the directory.

This command will create a new package.json inside the directory. (Refer to the note in

the Developing with continuous feedback with hot reloading recipe on Yarn.)

For this npm project, we will need a couple of dependencies other than Vue: Webpack, and

Babel in the form of a loader for Webpack. Oh yes, we will need the vue-loader as well

for Webpack. To install them, launch the following two commands:

npm install --save vue

npm install --save-dev webpack babel-core babel-loader babel-preset-es2015

vue-loader vue-template-compiler

In the same directory, let's write a component that uses ES6 syntax; let's call it myComp.vue:

<template>

<div>Hello</div>

</template>

<script>

var double = n => n * 2

export default {

beforeCreate () {

console.log([1,2,3].map(double))

}

}

</script>