現在、各主要ブラウザは基本的に ES6 の新機能をサポートしています。その中でも Chrome と Firefox は ES6 の新機能に最も対応しており、IE7～11 は基本的に ES6 をサポートしていません。

以下は各主要ブラウザのサポート状況と開始時期です。

Chrome 58 Edge 14 Firefox 54 Safari 10 Opera 55
2017 年 1 月 2016 年 8 月 2017 年 3 月 2016 年 7 月 2018 年 8 月

实例

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="サンプル"
undefined
> console.log(sitename)
サンプル
undefined
>

以下のコマンドを使用すると、Node がすでに実装している ES6 機能を確認できます。

node --v8-options | grep harmony

webpack

webpack は、現代の JavaScript アプリケーション向けの静的モジュールバンドラー (module bundler) です。webpack がアプリケーションを処理するとき、アプリケーションが必要とする各モジュールを含む依存関係グラフ (dependency graph) を再帰的に構築し、それらすべてのモジュールを1つまたは複数の bundle にバンドルします。

webpack には主に4つの中核となる概念があります。

  • 入口 (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 をどこに出力するか、およびこれらのファイルをどのように命名するかを webpack に指示します。デフォルト値は ./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')); })

参考文章