saitoxu · March 22, 2017 08:06
diff --git a/application.js b/application.js
 import Friend from './friend';

 let friend = new Friend('Taro');
 friend.callName();
diff --git a/compile.sh b/compile.sh
 $ 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
diff --git a/friend.js b/friend.js
 import Person from './person';

 class Friend extends Person {
  constructor(name) {
    super(name);
  }

  callName() {
    alert(this.name);
  }
 }

 export default Friend;
diff --git a/index.html b/index.html
 <!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>
diff --git a/init.sh b/init.sh
 $ mkdir js-tutorial && cd js-tutorial
 $ yarn init
 $ yarn add -D webpack babel-core babel-loader babel-preset-es2015
 $ yarn # インストール
diff --git a/package.json b/package.json
 {
  "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": {}
 }
diff --git a/person.js b/person.js
 class Person {
  constructor(name) {
    this.name = name;
  }
 }

 export default Person;
diff --git a/tree.sh b/tree.sh
 $ tree
 ├── dst
 │   └── application.js # webpackでコンパイルしたJSファイル
 ├── index.html
 ├── node_modules
 │   └── ...
 ├── package.json
 ├── src
 │   └── ... # sourceファイル群
 ├── webpack.config.js
 └── yarn.lock
diff --git a/webpack.config.js b/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']
        }
      }
    ]
  }
 };
diff --git a/yarn.sh b/yarn.sh
 $ 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.
	import Friend from './friend';

	let friend = new Friend('Taro');
	friend.callName();
	$ 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
	import Person from './person';

	class Friend extends Person {
	constructor(name) {
	super(name);
	}

	callName() {
	alert(this.name);
	}
	}

	export default Friend;
	<!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>
	$ mkdir js-tutorial && cd js-tutorial
	$ yarn init
	$ yarn add -D webpack babel-core babel-loader babel-preset-es2015
	$ yarn # インストール
	{
	"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": {}
	}
	class Person {
	constructor(name) {
	this.name = name;
	}
	}

	export default Person;
	$ tree
	├── dst
	│ └── application.js # webpackでコンパイルしたJSファイル
	├── index.html
	├── node_modules
	│ └── ...
	├── package.json
	├── src
	│ └── ... # sourceファイル群
	├── webpack.config.js
	└── yarn.lock
	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']
	}
	}
	]
	}
	};
	$ 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.