ES6基礎(chǔ)——環(huán)境構(gòu)建
1. 為什么學(xué)習(xí) ES6 需要構(gòu)建環(huán)境
1. 因?yàn)?ES6 一些語法, 在瀏覽器中是不能直接運(yùn)行的 。
2. 環(huán)境構(gòu)建內(nèi)容:
1. 基礎(chǔ)架構(gòu)
1. 項(xiàng)目需要放置那些目錄 。
2. 那些目錄放置那些文件 。
3. 思考為什么這樣放, 它的合理性在哪里 。
4. 結(jié)合模塊化的思想, 如何去創(chuàng)建一個(gè)前端項(xiàng)目的架構(gòu)組成 。
2. 任務(wù)自動(dòng)化 (gulp)
1. 簡單來說就是自動(dòng)化編譯, 如 sass/less 自動(dòng)編譯為 css 。
3. 編譯工具 (babel / webpack)
1. 自動(dòng)化需要編譯工具去完成 。
4. 代碼實(shí)現(xiàn)
1. 由于代碼太多在下面會(huì)有專門的一篇文章去展示代碼以及解說代碼的含義 。
3. 任務(wù)自動(dòng)化 gulp:
1. 什么是任務(wù)自動(dòng)化
1. 減少人工操作, 讓機(jī)器監(jiān)聽我們所有的操作, 讓其自動(dòng)響應(yīng) 。
2. 什么是 gulp
1. 通俗來說就是一個(gè)解決自動(dòng)化的一個(gè)工具 。
2. gulp 通過 stream 流的方式, 操作文件非常的快 。
3. gulp 的作用
1. 完成自動(dòng)化, 幫助我們工作流程順利完成 。
4. 了解如何使用 gulp 完成任務(wù)自動(dòng)化
1. 去 gulp 中文網(wǎng)了解 API
2. 了解 gulp 配合使用的插件 。
4. 編譯工具:
1. 什么是 babel 、 webpack
1. babel: 可以理解為 JavaScript 的編譯器(ES6 是不能直接在瀏覽器上運(yùn)行的, 它需要編譯, 而編譯的工具就是 babel);
2. webpack: 解決模塊化 。
2. babel 的核心用法
1. 解決兼容性問題 、 如何做編譯 、 應(yīng)該引用那些包 。
3. 了解 webpack 以及 webpack-stream 的作用
1. webpack-stream 是對 gulp 的一個(gè)支持插件; gulp 是通過二進(jìn)制流的方式去操作的, webpack 在 gulp 上使用的就是 webpack-stream 去操作的 。
5. 環(huán)境構(gòu)建的具體思路:
1. 完成目錄結(jié)構(gòu)
2. 自動(dòng)構(gòu)建
3. 服務(wù)器搭建
如圖所示:
01-01.png
5.1 構(gòu)建思路 構(gòu)建 3 個(gè)版塊
1. 構(gòu)建思路 構(gòu)建 3 個(gè)版塊 。
1. 放置我們前端代碼這一塊 -- app ; 包括 js/css/以及一些模板 。
1. css: 放置 .CSS 文件目錄
2. js: 放置 .JS 文件目錄
1. class: 放置 '類' 文件目錄
1. test.js: 初始類文件
2. index.js: 初始入口文件
3. views: 放置 .html 模板目錄
1. error.ejs: 初始錯(cuò)誤模板文件
2. index.ejs: 初始入口模板文件
1. 使用 .ejs 文件而不是使用 .html 文件, 是因?yàn)閯?chuàng)建服務(wù)器的代碼是通過 express nodeJS 框架來做的; express 它所使用的引擎就是 .ejs 模板引擎 。
2. 放置服務(wù)器代碼 -- server; 提供我們真實(shí)的數(shù)據(jù) 。
1. 我們在創(chuàng)建 server 的過程中需要使用一個(gè)工具, 即 express 腳手架工具(使用 express 的前提是已經(jīng)安裝了 nodeJS) 。
2. Node.js 安裝包網(wǎng)址: http://nodejs.cn/download/
3. express 腳手架使用流程:
1. express -e . : express 腳手架啟動(dòng)命令; -e 表示我要使用 ejs 模板引擎; . 表示在當(dāng)前目錄執(zhí)行 。
2. 在當(dāng)前目錄執(zhí)行 cnpm i (此時(shí)服務(wù)代碼已經(jīng)安裝完成)。
3. 前端代碼編譯, 服務(wù)器定時(shí)刷新 '構(gòu)建工具'-- tasks; 起到一個(gè)輔助作用的模塊 。
1. 在當(dāng)前目錄創(chuàng)建一些任務(wù)的 .js 文件: 文件的合并 、 腳本的編譯 、 模板的自動(dòng)更新 。
如圖所示:
02-01.png
5.2. 創(chuàng)建一個(gè) package.json 文件
1. 創(chuàng)建方法:
1. 手動(dòng)創(chuàng)建
2. 自動(dòng)創(chuàng)建
1. cnpm init (初始化 package.json 文件);
2. 當(dāng)這個(gè)文件創(chuàng)建完成之后, 我們就可以通過 cnpm i 來安裝我們需要的依賴包 。
5.3 創(chuàng)建一個(gè)設(shè)置 babel 編譯工具的配置文件
1. 命令行操作: touch .babelrc
1. .babelrc 文件名是固定的, 我們不能隨便修改, 因?yàn)?babel 進(jìn)行編譯的時(shí)候會(huì)自動(dòng)尋找 .babelrc 文件, 如果沒有找到就無法讀取配置內(nèi)容 。
5.4 創(chuàng)建一個(gè) gulp 配置文件
1. 命令行操作: touch gulpfile.babel.js
1. 為什么沒有按照官網(wǎng)去創(chuàng)建一個(gè) gulpfile.js 文件, 而是創(chuàng)建了一個(gè) gulpfile.babel.js 文件; 這是因?yàn)槲覀兊捻?xiàng)目使用的都是 ES6 語法, 如果這里不使用 gulpfile.babel.js 的話, 那么在執(zhí)行 gulp 腳本的時(shí)候, 它是會(huì)報(bào)錯(cuò)的 。
2. 安裝 express-generator 腳手架
1. sudo cnpm install -g express-generator
2. express --version 檢測安裝是否成功 。
6. 知識點(diǎn)擴(kuò)展: Mac 命令行使用積累
1. mkdir name 創(chuàng)建文件夾
2. touch name 創(chuàng)建文件
3. cd ../name/
4. express -e .
5. cd . && npm install
6. cd . 當(dāng)前目錄
之前有整理過部分知識點(diǎn), 現(xiàn)在將整理的相關(guān)內(nèi)容, 驗(yàn)證之后慢慢分享給大家; 這個(gè)專題是 “前端ES6基礎(chǔ)” 的相關(guān)專欄; 不積跬步，無以至千里, 戒焦戒躁 。
如果對你有所幫助，喜歡的可以點(diǎn)個(gè)關(guān)注; 文章會(huì)持續(xù)打磨 。
有什么想要了解的前端知識嗎? 可以評論區(qū)留言, 會(huì)及時(shí)跟進(jìn)分享所相關(guān)內(nèi)容 。
整理知識點(diǎn)不易, 每次都是在工作繁忙之余夜深人靜之時(shí)整理, 無論知識點(diǎn)是大是小, 都會(huì)驗(yàn)證后再分享, 以防自己發(fā)表的文章給大家造成誤導(dǎo) 。如有問題還望不吝賜教，本人會(huì)及時(shí)更改 (本文原創(chuàng), 如需轉(zhuǎn)載，請注明出處) 。
