20hrs

從 前面安裝完元件 後，直接跳到要求自己寫一個 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 就完成準備工作了 可以開始準備寫 Color Game 的 Component Based 版 先依照 DOM 製作 html 檔 然後打開 component.js 我傻眼了 因為 export default class / import / static getRootClass() 這些完全看不懂啊

Babel 是 ES6、ES7 的 transpiler，可以把 ES6、ES7 轉成 ES5，讓大多的主流瀏覽器都可以讀的懂。 在 Terminal 輸入以下指令安裝 babel npm install --save-dev babel-core babel-loader babel-preset-es2015 安裝好後當然要去 webpack.config.js 做設定如下 其中 module: false 的原因是 不要 babel 去 translate module 相關的部份 i.g. import & export，因為 webpack 2.0 已經看的懂了，不會去包裝尺寸也較小 module.exports = { context: path.resolve(__dirname, './src'), entry: { main: './main.js', vendor: ['lodash'] }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].bundle.js' }, module: { rules: [ { test : / \. js $ / , exclude : [ /node_module/ ], use: [{ loader: 'babel-loader' , options: { presets: [ [ 'es2015' , { ...