saitoxu.io

AboutTwitterGitHub

Yarn + webpack + BabelでES6入門

March 20, 2017

Yarn や webpack を使ったことがなかったので、 以下の記事をトレースする形で勉強がてら ES6 の環境を作ってみました。

webpack+babel 環境でフロントエンドも ES6 開発

環境

  • macOS Sierra 10.12.3
  • Node.js v6.10.0
  • Yarn v0.21.3

1. Yarn インストール

Yarn が入ってない人はインストールしてください。

$ brew update
$ brew install yarn
$ yarn -v
yarn install v0.21.3
[1/4] 🔍 Resolving packages...
success Already up-to-date.
✨ Done in 0.36s.
view raw yarn.sh hosted with ❤ by GitHub

2. webpack + babel インストール

最初に Yarn を使って webpack と babel をインストールします。

$ mkdir js-tutorial && cd js-tutorial
$ yarn init
$ yarn add -D webpack babel-core babel-loader babel-preset-es2015
$ yarn # インストール
view raw init.sh hosted with ❤ by GitHub

3. Yarn と webpack の設定

ディレクトリ構成は以下のようにします。

$ tree
├── dst
│   └── application.js # webpackでコンパイルしたJSファイル
├── index.html
├── node_modules
│   └── ...
├── package.json
├── src
│   └── ... # sourceファイル群
├── webpack.config.js
└── yarn.lock
view raw tree.sh hosted with ❤ by GitHub

それに合わせてwebpack.config.jsを以下のように書きます。

module.exports = {
context: __dirname + '/src',
entry: {
'application': './application',
},
output: {
path: __dirname + '/dst',
filename: '[name].js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ['es2015']
}
}
]
}
};
view raw webpack.config.js hosted with ❤ by GitHub

webpack で ES6 をコンパイルするときのコマンドをpackage.jsonの scripts に書いておきます。

{
"name": "js-tutorial",
"scripts": {
"build": "`yarn bin`/webpack"
},
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.0",
"webpack": "^2.2.1"
},
"dependencies": {}
}
view raw package.json hosted with ❤ by GitHub

4. ES6 でコードを書く

ES6 でコードを書きます。 この辺は元記事とだいたいいっしょです。

class Person {
constructor(name) {
this.name = name;
}
}
export default Person;
view raw person.js hosted with ❤ by GitHub

import Person from './person';
class Friend extends Person {
constructor(name) {
super(name);
}
callName() {
alert(this.name);
}
}
export default Friend;
view raw friend.js hosted with ❤ by GitHub

import Friend from './friend';
let friend = new Friend('Taro');
friend.callName();
view raw application.js hosted with ❤ by GitHub

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Tutorial</title>
<script src="dst/application.js"></script>
</head>
<body>
<h1>JS Tutorial</h1>
</body>
</html>
view raw index.html hosted with ❤ by GitHub

5. コンパイル＆確認

webpack でコンパイルして、ブラウザで確認してみましょう。 alert が出れば OK です。

$ yarn run build
yarn run v0.21.3
$ `yarn bin`/webpack
Hash: 4275ae52df5e0f0a5001
Version: webpack 2.2.1
Time: 502ms
Asset Size Chunks Chunk Names
application.js 5.58 kB 0 [emitted] application
[0] ./friend.js 2.15 kB {0} [built]
[1] ./person.js 356 bytes {0} [built]
[2] ./application.js 258 bytes {0} [built]
✨ Done in 1.43s.
$ hs
Starting up http-server, serving ./
Available on:
http://127.0.0.1:8080
http://192.168.1.8:8080
http://192.168.33.1:8080
Hit CTRL-C to stop the server
view raw compile.sh hosted with ❤ by GitHub

ちなみに最後のhsはhttp-serverという npm モジュールで、 さくっと web サーバを立てるのに便利です。

© 2021, Yosuke Saito