ES6學習(一)搭建環境


作為一名后端小開發,業務工作需要將后台系統重構一番,許多同事都已經使用前后分離搭建項目,為了不拖后腿自己在家摸索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  名稱也是固定的)

  好了,目前項目構建的初始化文件算是搞定了。

下一節下次繼續;


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM