入門
創建web服務器
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);
接收請求參數
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);
NPM命令
1.初始化工程
npm init
生成的package.json文件內容
2.本地安裝
使用 npm install 命令安裝模塊
關於版本號：
- 指定版本：比如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：安裝最新版本。
5.全局安裝
打開所在目錄查看是否安裝成功
6.批量下載
從網上下載某些代碼時，只有package.json,沒有node_modules文件夾，這時我
們需要通過命令重新下載這些js庫。
進入目錄（package.json所在的目錄）
npm install
7.淘寶鏡像
npm install cnpm -g -‐registry=https://registry.npm.taobao.org
安裝完畢之後再次下載express庫
命令不再是npm install express
而是cnpm install express
Webpack
1.安裝
2.js打包
在src下創建三個js文件，這三個文件被用於打包
bar.js
exports.info=function(str){
document.write(str);
}
logic.js
exports.add=function(a,b){
return a+b;
}
main.js
var bar= require('./bar');
var logic= require('./logic');
bar.info( 'Hello world!'+ logic.add(100,200));
在src的同級目錄下創建webpack.config.js
var path = require("path");
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
}
};
使用webpack命令進行編譯
編譯成功之後
創建index.html引用bundle.js
<!doctype html>
<html>
<head>
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>
index.html顯示
3.css打包
安裝打包所需插件
cnpm install style-loader css-loader --save-dev
修改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']
}
]
}
};
編寫被引入的banckground.css
ps：這個地方我之前加了空格效果一直出不來。
body{
background:red;
}
在main.js中引入css
require('./background.css');
重新編譯之後，頁面顯示效果
