01 node.js，npm，es6入門

阿新 • • 發佈：2018-12-14

Node.js安裝

1、下載對應你係統的Node.js版本:

命令提示符下輸入命令

node -v

會顯示當前node的版本

快速入門

1 控制檯輸出

如何在控制檯輸出，建立文字檔案demo1.js,程式碼內容

var a=1;
var b=2;
console.log(a+b);

在命令提示符下輸入命令

node demo1.js

2 使用函式

建立文字檔案demo2.js

var c=add(100,200);
console.log(c);
function add(a,b){
    return a+b;
}

命令提示符輸入命令

node demo2.js

執行後看到輸出結果為300

3 模組化程式設計

建立文字檔案demo3_1.js

exports.add=function(a,b){
    return a+b;
}

建立文字檔案demo3_2.js

var demo= require('./demo3_1');
console.log(demo.add(400,600));

在命令提示符下輸入命令

node demo3_2.js

結果為1000

4 建立web伺服器

建立文字檔案demo4.js
http為內建模組

var http = require('http');
http.createServer(function (request, response) {
    // 傳送 HTTP 頭部 
    // HTTP 狀態值: 200 : OK
    // 內容型別: text/plain
    response.writeHead(200, {'Content-Type': 'text/plain'});
    // 傳送響應資料 "Hello World"
    response.end('Hello World\n');
}).listen(8888);
// 終端列印如下資訊
console.log('Server running at http://127.0.0.1:8888/');

http為node內建的web模組

在命令提示符下輸入命令

node demo4.js

服務啟動後，我們開啟瀏覽器，輸入網址

http://localhost:8888/

即可看到網頁輸出結果Hello World
Ctrl+c 終止執行。

5 理解服務端渲染

建立demo5.js ，將上邊的例子寫成迴圈的形式

var http = require('http');
http.createServer(function (request, response) {
    // 傳送 HTTP 頭部 
    // HTTP 狀態值: 200 : OK
    // 內容型別: text/plain
    response.writeHead(200, {'Content-Type': 'text/plain'});
    // 傳送響應資料 "Hello World"
    for(var i=0;i<10;i++){
        response.write('Hello World\n');
    }  
    response.end('');   
}).listen(8888);
// 終端列印如下資訊
console.log('Server running at http://127.0.0.1:8888/');

我們在命令提示符下輸入命令啟動服務

node demo5.js

瀏覽器位址列輸入http://127.0.0.1:8888即可看到查詢結果。

右鍵“檢視原始碼”發現，並沒有我們寫的for迴圈語句，而是直接的10條Hello World ，這就說明這個迴圈是在服務端完成的，而非瀏覽器（客戶端）來完成。這與我們原來的JSP很是相似。

6 接收引數

建立demo6.js

var http = require('http');
var url = require('url');
http.createServer(function(request, response){
    response.writeHead(200, {'Content-Type': 'text/plain'});
    // 解析 url 引數
    var params = url.parse(request.url, true).query;
    response.write("name:" + params.name);
    response.write("\n");
    response.end();
}).listen(8888);
console.log('Server running at http://127.0.0.1:8888/');

我們在命令提示符下輸入命令

node demo6.js

在瀏覽器測試結果http://localhost:8888/?name=1

包資源管理器NPM

什麼是NPM

npm全稱Node Package Manager，他是node包管理和分發工具。其實我們可以把NPM理解為前端的Maven .

我們通過npm 可以很方便地下載js庫，管理前端工程.

最近版本的node.js已經集成了npm工具，在命令提示符輸入 npm -v 可檢視當前npm版本

NPM命令

1 初始化工程

init命令是工程初始化命令。

建立一個空資料夾，在命令提示符進入該資料夾執行命令初始化

npm init

按照提示輸入相關資訊，如果是用預設值則直接回車即可。

name: 專案名稱

version: 專案版本號

description: 專案描述

keywords: {Array}關鍵詞，便於使用者搜尋到我們的專案

最後會生成package.json檔案，這個是包的配置檔案，相當於maven的pom.xml

我們之後也可以根據需要進行修改。

本地安裝

install命令用於安裝某個模組，如果我們想安裝express模組（node的web框架），輸出命令如下：

npm install express

出現黃色的是警告資訊，可以忽略，請放心，你已經成功執行了該命令。

在該目錄下已經出現了一個node_modules資料夾和package-lock.json

node_modules資料夾用於存放下載的js庫（相當於maven的本地倉庫）

package-lock.json是當 node_modules 或 package.json 發生變化時自動生成的檔案。這個檔案主要功能是確定當前安裝的包的依賴，以便後續重新安裝的時候生成相同的依賴，而忽略專案開發過程中有些依賴已經發生的更新。

我們再開啟package.json檔案，發現剛才下載的express已經新增到依賴列表中了.

關於版本號定義：

指定版本：比如1.2.2，遵循“大版本.次要版本.小版本”的格式規定，安裝時只安裝指定版本。

波浪號（tilde）+指定版本：比如~1.2.2，表示安裝1.2.x的最新版本（不低於1.2.2），但是不安裝1.3.x，也就是說安裝時不改變大版本號和次要版本號。

插入號（caret）+指定版本：比如ˆ1.2.2，表示安裝1.x.x的最新版本（不低於1.2.2），但是不安裝2.x.x，也就是說安裝時不改變大版本號。需要注意的是，如果大版本號為0，則插入號的行為與波浪號相同，這是因為此時處於開發階段，即使是次要版本號變動，也可能帶來程式的不相容。

latest：安裝最新版本。

全域性安裝

全域性目錄在哪裡，執行命令

npm root -g

全域性安裝jquery, 輸入以下命令

npm install jquery -g

批量下載

進入目錄（package.json所在的目錄）輸入命令

npm install

淘寶NPM映象

輸入命令，進行全域性安裝淘寶映象。

npm install -g cnpm --registry=https://registry.npm.taobao.org

檢視cnpm的版本

cnpm -v

使用cnpm

cnpm install 需要下載的js庫

執行工程

使用run命令

如果package.json中定義的指令碼如下

dev是開發階段測試執行

build是構建編譯工程

lint 是執行js程式碼檢測

我們現在來試一下執行dev

npm run dev

編譯工程

npm run build

會生成dist資料夾

Webpack

Webpack 是一個前端資源載入/打包工具。它將根據模組的依賴關係進行靜態分析，然後將這些模組按照指定的規則生成對應的靜態資源。

Webpack安裝

全域性安裝

npm install webpack -g
npm install webpack-cli -g

安裝後檢視版本號

webpack -v

JS打包

（1）建立src資料夾，建立bar.js

exports.info=function(str){
   document.write(str);
}

（2）src下建立logic.js

exports.add=function(a,b){
    return a+b;
}

（3）src下建立main.js

var bar= require('./bar');
var logic= require('./logic');
bar.info( 'Hello world!'+ logic.add(100,200));

（4）建立配置檔案webpack.config.js ，該檔案與src處於同級目錄

var path = require("path");
module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    }
};

以上程式碼的意思是：讀取當前目錄下src資料夾中的main.js（入口檔案）內容，把對應的js檔案打包，打包後的檔案放入當前目錄的dist資料夾下，打包後的js檔名為bundle.js

（5）執行編譯命令

webpack

執行後檢視bundle.js 會發現裡面包含了上面兩個js檔案的內容

（7）建立index.html ,引用bundle.js

<!doctype html>
<html>
  <head>  
  </head>
  <body>   
    <script src="dist/bundle.js"></script>
  </body>
</html>

測試呼叫index.html，會發現有內容輸出

CSS打包

（1）安裝style-loader和 css-loader

Webpack 本身只能處理 JavaScript 模組，如果要處理其他型別的檔案，就需要使用 loader 進行轉換。

Loader 可以理解為是模組和資源的轉換器，它本身是一個函式，接受原始檔作為引數，返回轉換的結果。這樣，我們就可以通過 require 來載入任何型別的模組或檔案，比如 CoffeeScript、 JSX、 LESS 或圖片。首先我們需要安裝相關Loader外掛，css-loader 是將 css 裝載到 javascript；style-loader 是讓 javascript 認識css

cnpm install style-loader css-loader --save-dev

--save-dev開發時依賴
（2）修改webpack.config.js

var path = require("path");
module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [  
            {  
                test: /\.css$/,  
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }
};

（3）在src資料夾建立css資料夾,css資料夾下建立css1

body{
 background:red;
}

（4）修改main.js ，引入css1.css

require('./css/css1.css');

（5）重新執行webpack

（6）執行index.html背景變成紅色

ES6

ECMAScript 6.0是JavaScript語言的下一代標準

Node.js中使用ES6

ES6+ 很多高階功能node是不支援的,就需要使用babel轉換成ES5

（1）babel轉換配置,專案根目錄新增.babelrc 檔案

{
  "presets" : ['es2015']
}

（2）安裝es6轉換模組

cnpm install babel-preset-es2015 --save-dev

（3）全域性安裝命令列工具

cnpm install  babel-cli -g

（4）使用

babel-node js檔名

語法新特性

變數宣告let

ES6以前，var關鍵字宣告變數。無論宣告在何處，都會被視為宣告在函式的最頂部(不在函式內即在全域性作用域的最頂部)。這就是函式變數提升例如

  function aa() {
    if(bool) {
        var test = 'hello man'
    } else {
        console.log(test)
    }
  }

以上的程式碼實際上是:

function aa() {
    var test // 變數提升
    if(bool) {
        test = 'hello man'
    } else {
        //此處訪問test 值為undefined
        console.log(test)
    }
    //此處訪問test 值為undefined
  }

所以不用關心bool是否為true or false。實際上，無論如何test都會被建立宣告。
ES6：
通常用let和const來宣告，let表示變數、const表示常量。let和const都是塊級作用域。怎麼理解這個塊級作用域？在一個函式內部，在一個程式碼塊內部。看以下程式碼

 function aa() {
    if(bool) {
       let test = 'hello man'
    } else {
        //test 在此處訪問不到
        console.log(test)
    }
  }

常量宣告

const 用於宣告常量，看以下程式碼

const name = 'lux'
name = 'joe' //再次賦值此時會報錯

模板字串

第一個用途，基本的字串格式化

    //es5 
    var name = 'lux'
    console.log('hello' + name)
    //es6
    const name = 'lux'
    console.log(`hello ${name}`) //hello lux

第二個用途，多行字串或者字串一行行拼接

    // es5
    var msg = "Hi \
    man!"
    // es6
    const template = `<div>
        <span>hello world</span>
    </div>`

函式預設引數

在定義函式時便初始化了這個引數

    function action(num = 200) {
        console.log(num)
    }
    action() //200
    action(300) //300

箭頭函式

箭頭函式最直觀的三個特點:

1不需要function關鍵字來建立函式

2省略return關鍵字

3繼承當前上下文的 this 關鍵字

看下面程式碼（ES6）

 add=(response,message) => {
    return a+b;
 }
或
 add = (a,b)=>a+b;

相當於ES5程式碼

add=function(response,message){
     return a+b;
}

物件初始化簡寫

ES5我們對於物件都是以鍵值對的形式書寫，是有可能出現鍵值對重名的。例如

function people(name, age) {
        return {
            name: name,
            age: age
        };
    }
console.log(JSON.stringify(people('aa',11)));

以上程式碼可以簡寫為

  function people(name, age) {
        return {
            name,
            age
        };
    }
console.log(JSON.stringify(people('aa',11)));

{"name":"aa","age":11}

解構

將一個數據結構分解為更小的部分的過程

ES5提取物件中的資訊形式如下

    const people = {
        name: 'lux',
        age: 20
    }
    const name = people.name
    const age = people.age
    console.log(name + ' --- ' + age)

ES6，例如

//物件
    const people = {
        name: 'lux',
        age: 20
    }
    const { name, age } = people
    console.log(`${name} --- ${age}`)
    //陣列
    const color = ['red', 'blue']
    const [first, second] = color
    console.log(first) //'red'
    console.log(second) //'blue'

Spread Operator

Spread Operator是三個點兒...
組裝物件或者陣列

    //陣列
    const color = ['red', 'yellow']
    const colorful = [...color, 'green', 'pink']
    console.log(colorful) //[red, yellow, green, pink]
    
    //物件
    const alp = { fist: 'a', second: 'b'}
    const alphabets = { ...alp, third: 'c' }
    console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"

import 和 export

import匯入模組、export匯出模組

lib.js

let fn0=function(){
    console.log('fn0...');
}
export {fn0}

demo9.js

import {fn0} from './lib'
fn0();

注意：node(v8.x)本身並不支援import關鍵字，所以我們需要使用babel的命令列工具來執行

babel-node demo9

#### Promise 是非同步程式設計：略

01 node.js，npm，es6入門

快速入門

1 控制檯輸出

2 使用函式

3 模組化程式設計

4 建立web伺服器

5 理解服務端渲染

6 接收引數

包資源管理器NPM

什麼是NPM

NPM命令

1 初始化工程

本地安裝

全域性安裝

批量下載

淘寶NPM映象

執行工程

編譯工程

Webpack

Webpack安裝

JS打包

CSS打包

ES6

Node.js中使用ES6

語法新特性

變數宣告let

常量宣告

模板字串

函式預設引數

箭頭函式

物件初始化簡寫

解構

Spread Operator

import 和 export

相關推薦