2018年春からフロントエンドを始める為の開発環境構築手順

あらすじ

春ですね。新人研修の準備をしましょう。

動作環境

babel-preset-env はこの記事を作成している時点では version 1 を使っています。しばらくすると version 2になるかもしれません。

% cat package.json                                                                     {
  "name": "practice-frontend",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "http-server": "^0.11.1",
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.12"
  }
}

準備1: 静的サーバーを用意

mkdir practice-frontend && cd $_ 
mkdir dist
echo 'hello' > dist/index.html
yarn init -y  
yarn add http-server --save-dev

localhost:8080 で静的サーバーを起動します。

yarn http-server dist

http://localhost:8080 にアクセスして hello が表示される事を確認します。

準備2: babel

mkdir src lib
touch .babelrc
yarn add babel-cli babel-preset-env --save-dev

.babelrc を作成します

{
  "presets": [
    ["env", {
      "targets": {
         "node": "v6.10",
         "ie": 11
      }
    }]
  ]
}

src/Dog.js を作成します。

export default class Dog {

  constructor(voice="bow wow") {
    this.voice = voice;
  }

  say() {
    return this.voice;
  }
}

トランスパイルします。

yarn babel -d lib/ src/

test.js を作成して node test.js を実行して動作を確認します。

var Dog = require('./lib/Dog').default;

var dog1 = new Dog();
var dog2 = new Dog('ruff ruff')

console.log(dog1.say())
console.log(dog2.say())

準備3: webpack 4

webpack は version 4から webpack と webpack-cli が別れたのでそれぞれを install します.

yarn add webpack webpack-cli --save-dev

webpack 4 からはある程度の規約がデフォルトで設定されるので webpack.config.js がなくても動作します。デフォルトではエントリーポイントが src/index.js となっています。先ほどの test.js と少し似ていますが src/index.js を用意します。

import Dog from './Dog';

var dog1 = new Dog();
var dog2 = new Dog('ruff ruff')

console.log(dog1.say())
console.log(dog2.say())

以下を実行すると dist/main.js にコンパイルされたファイルが出力されます。

yarn webpack --mode=development

以下のコマンドが動作することを確認します。

node dist/main.js

準備4: index.html を修正

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>test</title>
</head>
<body>
  hello world
<script type="text/javascript" src="main.js"></script>
</body>
</html>

この状態で yarn http-server dist を実行して http://localhost:8080 にアクセスしてデベロッパーコンソールなどで console.log が犬の鳴き声を出力している事を確認します。

http-server が cache を長くもっている(?)みたいなのでうまく表示されない場合は reload してみたりしてください。

まとめ

駆け足ですが最低限必要な開発環境を構築する手順を紹介しました。

あいつの日誌β

働きながら旅しています。