1. 程式人生 > >babel-node + Express NodeJS項目搭建指南

babel-node + Express NodeJS項目搭建指南

env 配置 poi 圖片 .... details res 技術 attribute

1.搭建Node.js環境

 從官網下載安裝

2.搭建Express環境

express 是 node.js的短精簡的Web框架,官網:http://www.expressjs.com.cn/

安裝:

npm install express -g #-g表示全局安裝 -S = --save

npm install express-generator -g

3.在某個目錄下,用express命令創建項目

3.1 創建項目

express <項目名>

技術分享圖片

創建的文件有app.js,package.json 目錄有bin public routes views

技術分享圖片

3.2 用`npm install`安裝依賴模塊

技術分享圖片

安裝開始後會生成一個專門放安裝包的目錄:node_modules

技術分享圖片

3.3 啟動服務器觀察是否可以訪問

使用npm start命令啟動服務器,並訪問3000端口觀察是否可以正常訪問

技術分享圖片

技術分享圖片

技術分享圖片

如上express項目配置完成,下一步配置babel-node,一款編寫node.js方便的小工具。

4.安裝babel-node

4.1 安裝babel-cli

在項目根目錄執行一下命令:

$npm install babel-cli --save-dev

$npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

4.2 安裝轉碼規則

$npm install babel-preset-env --save-dev

4.3 在根目錄下創建.babelrc這個文件,就是轉碼的時候用的

配置轉碼規則:

{

    "presets":["env"]

}

技術分享圖片

4.4 創建文件進行測試

class Point{
    constructor(x,y){
         this.x = x;
         this.y = y;
    }
    toString(){
        return "(" + this.x + "," + this.y + ")";
    }
}
 let p = new Point(1,2);
 console.log ( p.toString() );
 console.log(Point.name + "..............................................");
 let p2 = new Point();
 p2.x = ‘x2‘;
 p2.y = ‘y2‘;
 console.log(p2.toString());
--------------------- 
引用自:https://blog.csdn.net/Cinderella___/article/details/81071098 感謝!

技術分享圖片

4.5 直接運行

node .\node_modules\babel-cli\bin\babel-node.js <起始js>

技術分享圖片

如圖,運行成功!

4.6 配置一鍵運行項

技術分享圖片

技術分享圖片

如圖運行成功。至此項目配置完成

babel-node + Express NodeJS項目搭建指南