01 node.js,npm,es6入門
Node.js安裝
1、下載對應你係統的Node.js版本:
https://nodejs.org/en/download/
命令提示符下輸入命令
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
服務啟動後,我們開啟瀏覽器,輸入網址
即可看到網頁輸出結果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 是非同步程式設計:略