前端筆記

編譯 SASS 語法 | JavaScript 語法偵錯 | 單元測試 本文目的為介紹以 Gulp 打造 React Redux Router ES6 的開發及產品環境，以下將會說明所需的套件及設定方式，依建制步驟拆成五個篇章，關於 React Redux ES6 Jest 等相關知識不在此篇筆記介紹範圍。 第一篇 - 編譯 ES6 JSX 語法 | CSS JS 自動載入 | 本地端伺服器 編譯 JSX 及 ES6 語法 | Babel Browserify HTML 自動載入 CSS JS | Bower Wiredep Gulp Inject 建立開發用伺服器及自動重新載入 | Gulp Connect 第二篇 - 編譯 SASS | 語法偵錯 | 單元測試 編譯 SASS 語法 | Gulp Sass JavaScript 語法偵錯 | ESLint 單元測試 | Jest 第三篇 - 環境變數 | 程式碼壓縮 | 檔案壓縮 | 輸出隨機檔名 轉換開發及產品環境變數 | Browerify Dotenv Envify JavaScript SASS 程式碼壓縮 | Gulp Sass Uglify 產品環境下打包所有 JS CSS 檔案 | Gulp Useref 輸出的 CSS JS 檔案附加不重複的檔名 | Gulp Rev 第四篇 - 彙整 Gulp task 彙整 Gulp task - development 彙整 Gulp task - production 第五篇 - 導入 Redux React-Router 架構 導入 Redux Router 架構 | React Redux Router 前三篇會依序介紹每個功能及建置方式，第四篇會將零碎的 task 打包成一連串的動作，做成開發及產品環境的指令集，第五篇會把 react-redux 和 react-router 基本架構導入。 基本需求：已安裝 NodeJS 及了解如何使用 npm ，並知道如何使用 Gul

編譯 ES6 JSX 語法 | HTML 自動載入 CSS JS | 本地端伺服器 本文目的為介紹以 Gulp 打造 React Redux Router ES6 的開發及產品環境，以下將會說明所需的套件及設定方式，依建制步驟拆成五個篇章，關於 React Redux ES6 等相關知識不在此篇筆記介紹範圍。 第一篇 - 編譯 ES6 JSX 語法 | CSS JS 自動載入 | 本地端伺服器 編譯 JSX 及 ES6 語法 | Babel Browserify HTML 自動載入 CSS JS | Bower Wiredep Gulp Inject 建立開發用伺服器及自動重新載入 | Gulp Connect 第二篇 - 編譯 SASS | 語法偵錯 | 單元測試 編譯 SASS 語法 | Gulp Sass JavaScript 語法偵錯 | ESLint 單元測試 | Jest 第三篇 - 環境變數 | 程式碼壓縮 | 檔案壓縮 | 輸出隨機檔名 轉換開發及產品環境變數 | Browerify Dotenv Envify JavaScript SASS 程式碼壓縮 | Gulp Sass Uglify 產品環境下打包所有 JS CSS 檔案 | Gulp Useref 輸出的 CSS JS 檔案附加不重複的檔名 | Gulp Rev 第四篇 - 彙整 Gulp task 彙整 Gulp task - development 彙整 Gulp task - production 第五篇 - 導入 Redux React-Router 架構 導入 Redux Router 架構 | React Redux Router 前三篇會依序介紹每個功能及建置方式，第四篇會將零碎的 task 打包成一連串的動作，做成開發及產品環境的指令集，第五篇會把 react-redux 和 react-router 基本架構導入。 基本需求：已安裝 NodeJS 及了解如何使用 npm ，並知道如何使用 Gu

Sublime Text 一直是我很喜歡的前端編輯器，兼具輕量及可攜帶性一直是我很喜歡的特色，然而最近在開發 React 的時候，發現開發沒有特別設定的開發體驗實在不佳，於是在參考許多網路上大大們的文章後完成以下的開發環境需求，下面內容會一步步說明各個需求的設定過程，或許各位有更好的 package 清單，歡迎留言建議。 本篇所建立的開發環境 支援 ES6、JSX 語法高亮 | Support JSX Syntax Highlight 錯誤提示 | ES-Linter Emmet 支援 JSX 語法 | Enable Emmet while writing in JSX 自動完成語法 | React-Snippet 基本需求 Sublime 已經安裝 Package Manager 及 Emmet ，若已使用 SublimeLinter-jshint ，請在使用者設定的地方將他關掉。此外，NodeJS 也需要安裝。 Sublime Package List SublimeLinter SublimeLinter-contrib-eslint Babel Babel Snippets Node Package List eslint babel-eslint 1. 支援 ES6、JSX 語法高亮 使用 package manager 安裝 Babel 、 Babel Snippets ，再次開啟 .js 檔案時，點選 View -> Syntax -> Open all with current extension as... -> Babel -> JavaScript(Babel)。 若遇到想更換主題卻無法切換，可以在 ctrl + ` 的視窗中輸入 view.settings().erase("color_scheme") 。 2. 錯誤提示 npm 安裝 eslint 、 babel-eslint npm install eslint babel-eslint -g 使用 package manager 安裝 SublimeLinter 、 SublimeLinter-contrib-eslint 。 在