目前各大瀏覽器基本上都支援 ES6 的新特性，其中 Chrome 和 Firefox 瀏覽器對 ES6 新特性最友好，IE7~11 基本不支援 ES6。

以下是各大瀏覽器支援情況及開始時間:

例項

var
 
 a = 2;
{
  let a = 3;
  document.write(a); // 3
}
document.write('<br>');
document.write(a); // 2

瀏覽器支援的詳細的內容可以參考：http://kangax.github.io/compat-table/es6/

Node.js 是執行在服務端的 JavaScript，它對 ES6 的支援度更高。如果你還不瞭解 Node.js 可以閱讀我們的Node.js 教程。

Node.js 安裝可以參考Node.js 安裝配置。

在 Node.js 環境中執行 ES6

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

使用下面的命令，可以檢視 Node 已經實現的 ES6 特性。

node --v8-options | grep harmony

webpack

webpack 是一個現代 JavaScript 應用程式的靜態模組打包器 (module bundler) 。當 webpack 處理應用程式時，它會遞迴地構建一個依賴關係圖 (dependency graph) ，其中包含應用程式需要的每個模組，然後將所有這些模組打包成一個或多個 bundle

webpack 主要有四個核心概念:

• 入口 (entry)
• 輸出 (output)
• loader
• 外掛 (plugins)

入口 (entry)

入口會指示 webpack 應該使用哪個模組，來作為構建其內部依賴圖的開始。進入入口起點後，webpack 會找出有哪些模組和庫是入口起點（直接和間接）依賴的。在 webpack 中入口有多種方式來定義，如下面例子：

單個入口（簡寫）語法:

const config = {
  entry: "./src/main.js"
}

物件語法:

const config = {
  app: "./src/main.js",
  vendors: "./src/vendors.js"
}

輸出 (output):

output 屬性會告訴 webpack 在哪裡輸出它建立的 bundles ，以及如何命名這些檔案，預設值為 ./dist:

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

loader

loader 讓 webpack 可以去處理那些非 JavaScript 檔案（ webpack 自身只理解 JavaScript ）。loader 可以將所有型別的檔案轉換為 webpack 能夠有效處理的模組，例如，開發的時候使用 ES6 ，通過 loader 將 ES6 的語法轉為 ES5 ，如下配置：

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)

loader 被用於轉換某些型別的模組，而外掛則可以做更多的事情。包括打包優化、壓縮、定義環境變數等等。外掛的功能強大，是 webpack 擴充套件非常重要的利器，可以用來處理各種各樣的任務。使用一個外掛也非常容易，只需要 require() ，然後新增到 plugins 陣列中。

// 通過 npm 安裝
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 用於訪問內建外掛 
const webpack = require('webpack'); 
 
const config = {
  module: {
    rules: [
      {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: "babel-loader"
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

利用 webpack 搭建應用

webpack.config.js

const path = require('path');
 
module.exports = {
  mode: "development", // "production" | "development"
  // 選擇 development 為開發模式， production 為生產模式
  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: [
    ...
  ]
}

上述例子構建了一個最簡單的配置，webpack 會從入口 main.js 檔案進行構建，通過 loader 進行js轉換，輸出一個為 bundle.js 的檔案，至此一整個過程就構建完成。

gulp

gulp 是一個基於流的自動化構建工具，具有易於使用、構建快速、外掛高質和易於學習的特點，常用於輕量級的工程中。

如何使用？

全域性安裝 gulp:

$ npm install --global gulp

在專案中引入依賴:

$ npm install --save-dev gulp

在專案根目錄下建立名為 gulpfile.js 的檔案:

const gulp = require('gulp');

// default 表示一個任務名，為預設執行任務
gulp.task('default', function() {
  // 放置預設的任務程式碼
})

執行 gulp:

$ gulp

利用 gulp 搭建應用

const gulp = require('gulp');
const uglify = require("gulp-uglify");  
 
gulp.task('default', function() {
  gulp.src('./src/main.js')
      .pipe(uglify())
      .pipe(gulp.dest('./dist'));
})

參考文章

• Node.js 教程
• Webpack 入門教程
• NPM 使用介紹