ES6ハンズオン開発環境の構築

ES6は紹介しませんが、環境の構築を開始するだけです〜

私はウェブストームを使用します

1.空のプロジェクトES6Demoと次のフォルダーを作成します

src：ES6コードが記述されているフォルダーと、記述されているjsプログラムがここに配置されます。

dist：BabelによってコンパイルされたES5コードのフォルダー、HTMLページをインポートする必要がある場合のjsファイル。

2.index.html（./ distの下にjsが導入されていることに注意してください）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="./dist/index.js"></script>
</head>
<body>
  hello es6
</body>
</html>

3.srcの下のindex.js

/**
 * Created by barry on 2019-2-19.
 */
let a = 1;
console.log(a);

4.プロジェクトを初期化します

コンソールでnpminit -yと入力し、Enterキーを押して次のようにpackage.jsonファイルを生成します

{
  "name": "ES6Demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

5. bable.cliをグローバルにインストールします。遅い場合は、cnpmを使用できます。ここでは説明しません。

npm install -g babel-cli

6.babel-preset-es2015とbabel-cliをローカルにインストールします

npm install --save-dev babel-preset-es2015 babel-cli

この時点で、package.jsonが変更されています。自分で比較してください

{
  "name": "ES6Demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1"
  }
}

同時に、追加のpackage-lock.jsonファイルがあります

7.プロジェクトの下に新しい.babelrcファイルを作成します

次のようにコードを追加します。

{
  "presets":[
    "es2015"
  ],
  "plugins":[]
}

8.この時点で、es6コードのes5コードへのコンパイルを開始し、コマンドウィンドウに入ることができます。

babel E01/src/index.js -o E01/dist/index.js

次に、次のように、distフォルダーにさらにindex.jsがあることがわかります。

"use strict";

/**
 * Created by barry on 2019-2-19.
 */
var a = 1;
console.log(a);

ブラウザを使用してindex.html、コンソール出力1、OK〜を開きます。

ES6ハンズオン開発環境の構築

おすすめ