Component-based Color Game @ Modern Web and App Programming

從前面安裝完元件後，直接跳到要求自己寫一個 component-based 的 color game，不管怎麼樣我都覺得太快啊啊啊。

但還是重頭來試著刻看看了⋯⋯。

首先

先做 npm 初始檔 package.json

npm init

導入 webpack 打包工具

npm install --save-dev webpack

新增 webpack.config.js 檔

把 webpack 加入快速執行指令

"scripts": {

"build": "webpack" ,

"watch": "webpack -w",

    "test": "echo \"Error: no test specified\" && exit 1"

},

再來安裝 CSS loader 才可以 import css 檔

npm install --save-dev css-loader style-loader

當然也要去 webpack.config.js 新增 css 打包指令

再來安裝 babel

npm install --save-dev babel-core babel-loader babel-preset-es2015

還有 babel 的 polyfill

npm install --save-dev babel-polyfill

最後在 webpack.config.js 新增 js 的打包指令還有 import polyfill 就完成準備工作了

	const path = require('path');
	const webpack = require('webpack');

	module.exports = {
	context: path.resolve(__dirname, './src'),
	entry: ['babel-polyfill', './main.js'],
	output: {
	path: path.resolve(__dirname, 'dist'),
	filename: '[name].bundle.js'
	},
	module: {
	rules: [
	{
	test: /\.js$/,
	exclude: [/node_modules/],
	use: [
	{
	loader: 'babel-loader',
	options: {
	presets: [
	[
	'es2015', {
	modules: false
	}
	]
	]
	}
	}
	]
	}, {
	test: /\.css$/,
	use: ['style-loader', 'css-loader']
	}
	]
	}
	};

view raw webpack.config.js hosted with ❤ by GitHub

可以開始準備寫 Color Game 的 Component Based 版

先依照 DOM 製作 html 檔

然後打開 component.js 我傻眼了
因為 export default class / import / static getRootClass()
這些完全看不懂啊

20hrs