概述
Node.js用c++語言編寫而成的座慰，是一個基于chrome V8引擎的javascript運(yùn)行環(huán)境系冗，讓javaScript的運(yùn)行脫離瀏覽器服務(wù)端岖研，可以使用javaScript語言書寫服務(wù)器端代碼
- 使用node來實(shí)現(xiàn)一個http服務(wù)器
下面創(chuàng)建了一個端口為8787的服務(wù)器.他與php显押，java等不同浸踩，像php本地還要基于阿帕奇服務(wù)器叔汁，node.js能用代碼快速搭建一個服務(wù)器。
// 引入http模塊
var http = require("http");
// 調(diào)用http的接口創(chuàng)建服務(wù)器检碗；回調(diào)--->異步据块；
var server = http.createServer(function(req,res){
// request:瀏覽器提交給服務(wù)器相關(guān)；response:服務(wù)器到瀏覽器折剃；
console.log(111);
// 設(shè)置編碼格式
res.setHeader("Content-type","text/html;charset=utf8");
res.write("<h1>hello world 11233</h1>");
res.write("你好世界");
res.end();
})
server.listen(8787);
模塊化
1. 模塊化開發(fā)
- CommonJS就是為JS的表現(xiàn)來制定規(guī)范另假，因?yàn)閖s沒有模塊的功能所以CommonJS應(yīng)運(yùn)而生，它希望js可以在任何地方運(yùn)行怕犁，不只是瀏覽器中边篮。
- 創(chuàng)建自己的模塊
node.js中命名空間是獨(dú)立的
在一個模塊里引入另一個模塊的方法或者變量使用require
- 引入fnData模塊
require("./fnData");- 導(dǎo)入與導(dǎo)出(導(dǎo)出變量或者函數(shù))
module.exports = {
myFn:test.myFn,
a:test.a
}
2. 內(nèi)置模塊
nodejs內(nèi)置模塊有：Buffer，C/C++Addons奏甫，Child Processes戈轿，Cluster，Console阵子，Cr
ypto思杯，Debugger，DNS挠进，Domain色乾，Errors，Events领突，F(xiàn)ile System暖璧，
Globals，HTTP攘须，HTTPS漆撞，Modules，Net于宙，OS浮驳，Path，Process捞魁，P unycode至会，Query Strings，Readline谱俭，REPL奉件，Stream宵蛀，String De coder，Timers县貌，TLS/SSL术陶，TTY，UDP/Datagram煤痕，URL梧宫， Utilities，V8摆碉，VM塘匣，ZLIB；內(nèi)置模塊不需要安裝巷帝，外置模塊需要安裝忌卤；
3. npm
- 一組模塊的集合，是node的包管理器
下面npm常用的終端命令
安裝Node模塊
npm install moduleNames
將包安裝到全局環(huán)境中
npm install <name> -g
安裝的同時楞泼，如果有package.json文件時,命令將信息寫入package.json中項目路徑中
npm install <name> --save
- 查看node模塊的package.json文件夾npm view moduleNames
- 查看當(dāng)前目錄下已安裝的node包
npm list- 查看幫助命令
npm help- 查看包的依賴關(guān)系
npm view moudleName dependencies- 查看包的源文件地址
npm view moduleName repository.url- 查看包所依賴的Node的版本
npm view moduleName engines- 查看npm使用的所有文件夾
npm help folders- 用于更改包內(nèi)容后進(jìn)行重建
npm rebuild moduleName- 檢查包是否已經(jīng)過時驰徊，此命令會列出所有已經(jīng)過時的包，可以及時進(jìn)行包的更新
npm outdated- 更新node模塊
npm update moduleName- 卸載node模塊
npm uninstall moudleName- 一個npm包是包含了package.json的文件夾现拒，package.json描述了這個文件夾的結(jié)構(gòu)辣垒。訪問npm的json文件夾的方法如下：
$ npm help json
此命令會以默認(rèn)的方式打開一個網(wǎng)頁，如果更改了默認(rèn)打開程序則可能不會以網(wǎng)頁的形式打開印蔬。- 發(fā)布一個npm包的時候勋桶，需要檢驗(yàn)?zāi)硞€包名是否已存在
$ npm search packageName- npm init：會引導(dǎo)你創(chuàng)建一個package.json文件，包括名稱侥猬、版本例驹、作者這些信息等
- npm root：查看當(dāng)前包的安裝路徑
npm root -g：查看全局的包的安裝路徑- npm -v：查看npm安裝的版本
4. webpack
概念：是近的一加載器兼打包工具，它能把各種資源退唠，例如J (含J X)鹃锈、 coffee、樣式(含less/sass)瞧预、圖片等都作為模塊來使用和處理屎债。
配置步驟
- 全局安裝webpack
npm install webpack -g
2.新建webpack.config.js編寫此配置文件
module.exports = {
// 當(dāng)前執(zhí)行文件的路徑
// 輸入
entry:__dirname+"/app/index.js",
// 輸出
output:{
path:__dirname+"/build",
filename:"bundle.js"
},
module:{
loaders:[{
test:/\.css$/,
loader:"style-loader!css-loader"
}]
},
watch:true,
devServer: {
contentBase: "./build",//本地服務(wù)器所加載的頁面所在的目錄
historyApiFallback: true,//不跳轉(zhuǎn)
inline: true//實(shí)時刷新
},
}
- 使用下面終端命令初始化自動創(chuàng)建package.json文件，一直按enter就可以了
npm init
- package.json文件已經(jīng)就緒垢油，我們在本項目中安裝Webpack作為依賴包
// 安裝Webpack
npm install --save-dev webpack
接著在文件夾中新建app和build文件夾盆驹，app文件夾放我們要寫的js,css等模塊文件，build里放webpack打包生成的js文件以及一個index.html
此時目錄結(jié)構(gòu)如下：
- 在inex.html文件中引入自動生成的bundle.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="div1"></div>
<!--webpack/gulp/grount-->
</body>
<script src="bundle.js"></script>
</html>
在module1.js中定義一些變量與方法滩愁，作為一個模塊使用exports導(dǎo)出
console.log("我是module1.js");
var a = "我是a變量";
var fn = function(){
console.log("我是fn函數(shù)");
}
module.exports = {
a,
fn
}
在index.js中使用require引入module.js的方法與變量
var res = require("./module1");
require("./index.css");
console.log("我是index.js");
console.log(res.a);
res.fn();
- 終端運(yùn)行webpack
webpack
7.在package-loack.json中scripts配置
對npm進(jìn)行配置后可以在命令行中使用簡單的npm start命令來替代webpack的命令
像 下面配置后躯喇，npm dev可以代替 npm webpack-dev-server --open命令
{
"dependencies": {
"css-loader": "^0.28.8",
"style-loader": "^0.19.1",
"webpack": "^3.10.0"
},
"devDependencies": {
"webpack-dev-server": "^2.11.0"
},
"scripts": {
"start": "webpack",
"dev": "webpack-dev-server --open"
}
}
此時輸入npm start 就可以打包文件了
今天就分享這么多的干貨了，希望可以對大家有一點(diǎn)點(diǎn)幫助
