入门
创建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');
重新编译之后，页面显示效果
