作為一名后端小開發,業務工作需要將后台系統重構一番,許多同事都已經使用前后分離搭建項目,為了不拖后腿自己在家摸索ES6的新特性,真心不知道什么ES3,ES5,一上來就開始搞ES6,在此留下學習筆記,方便后期查閱。
先說說為什么學習ES6?目前前后分離技術僅前端框架就有很多,譬如VUE, REACT...目前流行的這些都是基於ES6的新特性搭建新項目的,之前看了VUE的教學文檔,什么箭頭函數,封裝特性,數組參數等等等,一臉懵逼,這前端技術一點都不壓於后端技術。還是默默的低調學習吧。
ES6是javascript的編碼標准,阮一峰老師這里介紹的很詳細 http://es6.ruanyifeng.com/#docs/intro
ES6代碼是不能夠直接讓瀏覽器解析的,所以ES6代碼實際上是通過一個編譯工具編譯后才能夠讓瀏覽器解析,在使用ES6之前,我們需要搭建ES6工作環境,下面看一下流程;
1、安裝node.js
2、安裝npm
這里假使我已經安裝完成,由於npm是依賴於node的,所以我安裝完node后,npm 也自動安裝完成了。
cnpm 的安裝方法請查閱淘寶鏡像:http://npm.taobao.org/
一、安裝express 腳手架,使用ejs模板引擎
哇塞,確實沒有,算了安裝一下吧
等一下,由於npm 下載包包總是很慢,所以我這邊要先使用cnpm
通過cnpm 在全局更新安裝最新的npm,讓cnpm 發揮一下實力
到目前為止,我這邊已經安裝好了node, npm, cnpm; 下面開始安裝 express
1、執行如下命令
cnpm install -g express-generator
2、繼續執行安裝express
cnpm install -g express
3、express --version 查看一下版本,好了安裝完成;
二、創建我的一個項目
首先找一個文件夾,在目錄下創建這樣的一個項目。
說明:其中 express -e 是說明使用ejs模板引擎, . 點 是說明在當前目錄下創建
由上圖可見,在當前目前下執行 npm install 進行安裝
三、創建package.json文件
因為通過這文件可以安裝項目相關的依賴包;可以通過手動創建,也可以通過命令行創建。
1、在項目的根目錄執行:npm init
2、一路回車前行....,后面可以在文件中修改,這樣就可以創建完成了
有了這個文件,我們就可以通過 npm install 去安裝項目中需要依賴的擴展包了
繼續往下走
3、在項目根目錄創建 .babelrc 文件
說明:這個文件是用於設置babel編譯的配置文件(名稱是固定的)
4、在項目根目錄創建 gulpfile.babel.js
說明:gulp 配置文件,項目的構建工具是使用gulp做編譯的,有一個工作流的工作任務。(因為項目中使用了es6語法,所以名稱里要加入babel.js 名稱也是固定的)
好了,目前項目構建的初始化文件算是搞定了。
下一節下次繼續;