Currently, major browsers basically all support the new features of ES6. Among them, Chrome and Firefox browsers are the most friendly to ES6 new features. IE7~11 basically does not support ES6.

The following is the support status and start times of major browsers:

Chrome 58	Edge 14	Firefox 54	Safari 10	Opera 55
January 2017	August 2016	March 2017	July 2016	August 2018

For detailed content on browser support, you can refer to:http://kangax.github.io/compat-table/es6/

Node.js is JavaScript running on the server side, and it has higher support for ES6. If you don't understand Node.js yet, you can read ourNode.js Tutorial。

For Node.js installation, you can refer toNode.js Installation and Configuration。

Running ES6 in the Node.js Environment

$ node
> let sitename="example"
undefined
> console.log(sitename)
example
undefined
>

Use the following command to view the ES6 features that Node has already 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 contains every module the application needs, and then bundles 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 indicates which module webpack should use as the starting point for building its internal dependency graph. After entering the entry point, webpack will find out which modules and libraries are (directly and indirectly) dependent on the entry point. In webpack, there are multiple ways to define the entry, as 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. The default value is ./dist:

const config = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, 'dist')
  }
}

loader

Loaders allow webpack to process those non-JavaScript files (webpack itself only understands JavaScript). Loaders can convert all types of files into modules that webpack can effectively process. For example, when using ES6 during development, use loaders to convert ES6 syntax to ES5, as configured below:

Plugins (plugins)

Loaders are used to convert certain types of modules, while plugins can do much more. This includes bundle optimization, compression, defining environment variables, and so on. Plugins are powerful and are a very important tool for extending webpack, and can be used to handle various tasks. Using a plugin is also very easy - just require() it, and then add it to the plugins array.

Building Applications with webpack

The above example builds the simplest configuration. webpack will build starting from the entry main.js file, perform JS conversion through loaders, and output a file named bundle.js. At this point, the entire process is complete.

---

gulp

gulp is a stream-based automated build tool. It features ease of use, fast builds, high-quality plugins, and ease of learning, and is often used in lightweight projects.

How to use?

Install gulp globally:

$ npm install --global gulp

Add dependencies to the project:

$ npm install --save-dev gulp

Create a file named gulpfile.js in the project root directory:

const gulp = require('gulp');

// default 表示一个任务名，为默认执行任务
gulp.task('default', function() {
  // 放置默认的任务代码
})

Run gulp:

$ gulp

Building Applications with gulp

---

Reference Articles

• Node.js Tutorial
• Webpack Getting Started Tutorial
• NPM Usage Introduction