1.2 Setting Up an ES6 Environment
Category ES6 Tutorial
Currently, most major browsers essentially support the new features of ES6, with Chrome and Firefox being the most friendly to these new features, while IE7~11 generally do not support ES6.
Below is the support status and start time for each major browser:
Chrome 58 | Edge 14 | Firefox 54 | Safari 10 | Opera 55 |
January 2017 | August 2016 | March 2017 | July 2016 | August 2018 |
Example
var a = 2;
{
let a = 3;
document.write(a); // 3
}
document.write('<br>');
document.write(a); // 2
For detailed browser support, you can refer to: http://kangax.github.io/compat-table/es6/
Node.js is JavaScript that runs on the server-side and has a higher degree of support for ES6. If you are not familiar with Node.js, you can read our Node.js Tutorial.
Installation of Node.js can be referenced from Node.js Installation and Setup.
Running ES6 in the Node.js Environment
$ node
> let sitename="tutorialpro"
undefined
> console.log(sitename)
tutorialpro
undefined
>
Using the following command, you can check the ES6 features that Node has implemented.
node --v8-options | grep harmony
webpack
webpack is a static module bundler for modern JavaScript applications. When webpack processes an application, it recursively builds a dependency graph that includes every module required by the application, and then packs all these modules into one or more bundles.
webpack mainly has four core concepts:
Entry (entry)
Output (output)
Loader
Plugins (plugins)
Entry (entry)
The entry point instructs webpack which module to use as the starting point for building its internal dependency graph. After entering the entry point, webpack will determine which modules and libraries are directly and indirectly dependent on the entry point. There are several ways to define the entry point in webpack, as shown in the following examples:
Single entry (shorthand) syntax:
const config = {
entry: "./src/main.js"
}
Object syntax:
const config = {
app: "./src/main.js",
vendors: "./src/vendors.js"
}
Output (output):
The output property tells webpack where to output the bundles it creates and how to name these files, with the default value being ./dist:
const config = {
entry: "./src/main.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, 'dist')
}
}
Loader
Loader allows webpack to process non-JavaScript files (webpack itself only understands JavaScript). A loader can convert all types of files into modules that webpack can effectively handle, for example, when developing with ES6, a loader can convert ES6 syntax to ES5, as shown in the following configuration:
const config = {
entry: "./src/main.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options: [
presets: ["env"]
]
}
]
}
}
Plugins (plugins)
While loaders are used to transform certain types of modules, plugins can do more. This includes packaging optimization, compression, defining environment variables, etc. Plugins are powerful and an essential tool for extending webpack, capable of handling a variety of tasks. Using a plugin is also very easy, just require() it and then add it to the plugins array.
// Install via npm
const HtmlWebpackPlugin = require('html-webpack-plugin');
// Access built-in plugins
const webpack = require('webpack');
const config = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
Building an Application with webpack
webpack.config.js
``` const path = require('path');
module.exports = { mode: "development", // "production