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' , {

學完 vendor bundling 之後，接下來也要把 CSS 一起塞進 webpack 裡做模組化概念。 總之先安裝相關的 package npm install --save-dev css-loader style-loader 接著在自己的 JS 裡，就可以 import CSS 檔 import './module-1.css' ; 老樣子需要去 webpack.config.js 裡做些設定 // in webpack.config.js var path = require('path'); var webpack = require('webpack'); 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: / \. css $ / , // webpack 預設只認 JS 檔，透過這個可加入辨認 CSS use: [ 'style-loader' , 'css-loader' ] // 從後往前 load，此例會先 load css-loader } ] }, plugins : [ new webpack.optimize.

WEBPACK @ MODERN WEB AND APP PROGRAMMING 之後，開始進入到 vendor bundling 的概念 以下參考 這部影片 當有二個以上 entry point 時，可以如下寫法 module . exports = { context: path . resolve ( __dirname , './src' ), entry: { main: './main.js' , module: './module-1.js' }, output: { path: path . resolve ( __dirname , 'dist' ), filename: '[name].bundle.js' } }; 這時就會發生一個問題，例如 main.js module-1.js 都有 import lodash 產生 bundling 時，自然也就會產出二個 bundle js，裡面都有 lodash 這時就需要 vendor bundling 了 前往 webpack.config.js 編輯如下 // in webpack.config.js var path = require('path'); var webpack = require ( 'webpack' ); module.exports = { context: path.resolve(__dirname, './src'), entry: { main: './main.js', module: './module-1.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].bundle.js' }, plugins : [ new webp

繼 安裝完 node.js & NPM 之後，就可以來學習 webpack 了。 另外也可以參考 這篇 Webpack 中文指南 以下內容對應到 這個影片 使用 npm 指令安裝 webpack npm install --save-dev webpack 準備好檔案後，可以使用這個指令做包裝 ./node_modules/.bin/webpack src/main.js dist/main.bundle.js // ./node_modules/.bin/webpack <從哪個檔案開始分析起> <輸出包到哪個檔案> 也可以新增 webpack.config.js 檔，以後直接呼叫執行 // in webpack.config.js var path = require ( 'path' ); module . exports = { context: path . resolve ( __dirname , './src' ), // __dirname 代表 webpack.config.js 所在的資料夾 entry: { main: './main.js' }, output: { path: path . resolve ( __dirname , 'dist' ), filename: '[name].bundle.js' // [name] 表示 entry point 的 key 值，此例為 main } }; 另外還有在 package.json 裡的 script 增加下面，就可以搭配 npm run build 指令，不用再打上面一長串 "scripts" : { "build" : "webpack" }, 執行看看就會獲得一樣效果 npm run build // build 為指令名稱 有時候 code 會很頻繁的修改，為了

跟著 Modern Web and App Programming  一直學到 Lecture 05 Modern Javascript，突然有點頭昏腦脹，前面都還好好的學寫 JS、CSS，突然加進了一個 node.js 後，就正式進入包來包去的狀況。 以下根據 影片 裡面的部份做點記錄和整理。 總之要先安裝好 node.js 因為我本來就已經裝好了 xcode ，所以我參考了這篇  How to Install Node.js and NPM on a Mac 決定先把 Homebrew 裝好後，只要下簡單的指令就可以裝 node.js & npm ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 安裝好 Homebrew 後，直接安裝 node.js & npm brew install node 接著跑完就可以下指令檢查版本了 node -v npm -v 要更新版本的話，可以 brew update brew upgrade node // 只更新 node.js 接下來就可以開一個要工作的資料夾執行 node.js 初始化和安裝 package npm init // 執行後會產生 package.json 檔 npm install --save // node install --save-dev 要一起加入開發的話 // 影片中是使用 npm install --save lodash 為示範 接著影片提到通常原始寫的 javascript code 都是放在 src 資料夾，然後後製過、要實際執行的放在 dist 資料夾裡（html 檔也是放在 dist 這沒錯） 安裝好 package 後，在實際的 JS 檔案中，可以使用以下的方法使用 var _ = require('lodash'); console.log(_.join(['Hello', 'Node.js'], ' ')); 可以

第一次使用 VSCode @@ 總之一定要來搭配 Git 於 GitLab 上使用 先於 GitLab 上新增 New Project 新增完後，GitLab 會提醒需要 ssh 連線才能 push & pull https://gitlab.com/help/ssh/README (Teach how to generate a new key or locating a existing key) 下載 puttygen，產生一組 public & private key 在 GitLab 上傳 public key https://gitlab.com/profile/keys 接下來就回到 VS Code，按 Ctrl + ` ，把 Integrated Terminal 打開 輸入 public key 的檔案 cat ~/.ssh/id_rsa.pub 進入到要 git 的資料夾 cd newFolder 輸入一些 git 指令 // 設定 git 資訊 git config --global user.name "Your Name" git config --global user.email "Your Email" // 初始化 a new repository git init // 把 gitLab 上的同步過來 // 這邊會要求輸入 gitLab 的帳號密碼，就是登入時用的 git remote add origin git@gitlab.com:YOURNAME/YOURNAME.git // 把該資料檔案全部加入 git staging area (要同步的檔案) 準備 commit git add . //git add -A 也可 // 新增一個 commit git commit -m "版本備註" // 上傳到 gitLab // master 是主線的意思 git push -u origin master 回到 gitLab 查看一下東西有沒有上傳，這時應該 VSCODE 也會有對應的 git 狀態了

一點筆記 from Modern Web and App Programming HTML5 HTML5 之後可以直接進行表單元件的驗証了 i.g., input type="email" required  CSS、Bootstrap v4 根本直接掛 bootstrap就好了 CSS3 新元素 display:flex

因緣際會下決定重新學習網頁前端設計。 打算學習的方向是 HTML5 、CSS 3、Bootstrap、Javascript、React、React Navtive，重點是要熟悉 JS。 現在的網頁和八年前剛畢業所學的已經完全是另一個生態系了。 也只好從頭來過。好險很多概念基本上不變的。 目前打算首先從這篇開始 清大資工系教授的 Modern Web and App Programming https://nthu-datalab.github.io/webapp/index.html 免費 接著是 Udemy - The Complete JavaScript Course: Build a Real-World Project https://www.udemy.com/the-complete-javascript-course/ NTD $300 Udemy - JavaScript 全攻略：克服 JS 的奇怪部分 https://www.udemy.com/javascriptjs/ NTD $300 之後會在這裡將學習時間做個記錄。 https://time.graphics/line/d4720b9777f9dbb4bdbd1981f7c4fdd9