一、Node 开发
1、模块化开发
定义统一的方法：function.js
1
2
3
| exports.sum = function sum(a, b) {
return a + b;
}
|
导入方法：use.js
1
2
| var fun = require('./function')
console.log(fun.sum(1, 2))
|
2、服务器
1
2
3
4
5
6
7
8
9
10
11
|
var http = require('http');
http.createServer(function (request, response) {
response.writeHead(200, { 'Content-Type': 'text/plain' });
response.write('hi michong\n')
response.end('hello world!')
}).listen(8888);
|
3、接收参数
1
2
3
4
5
6
7
8
9
10
11
12
|
var http = require('http');
var url = require('url')
http.createServer(function (request, response) {
response.writeHead(200, { 'Content-Type': 'text/plain' });
var params = url.parse(request.url,true).query;
response.end('姓名：'+params.name);
}).listen(8888);
|
二、 包资源管理器NPM
npm全称Node Package Manager，他是node包管理和分发工具。其实我们可以把NPM
理解为前端的Maven
npm的镜像替换成淘宝
1
| npm config set registry http://registry.npm.taobao.org/
|
全局下载
运行工程
1
2
3
4
5
| 如果我们想运行某个工程，则使用run命令
如果package.json中定义的脚本如下
dev是开发阶段测试运行
build是构建编译工程
lint 是运行js代码检测
|
三、Webpack
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分
析，然后将这些模块按照指定的规则生成对应的静态资源。
全局安装
1
2
| npm install webpack ‐g
npm install webpack‐cli ‐g
|
快速入门
1、js打包
1
2
3
| exports.info = function (str) {
document.write(str);
}
|
1
2
3
| exports.add = function (a, b) {
return a + b;
}
|
1
2
3
| var bar = require('./bar');
var logic = require('./logic');
bar.info('hello world!' + logic.add(1, 2));
|
- 创建配置文件webpack.config.js ，该文件与src处于同级目录
1
2
3
4
5
6
7
8
| 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
- 创建index.html ,引用bundle.js
1
2
3
4
5
6
7
8
9
10
11
12
| <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>
|
2、css打包
Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用
loader 进行转换。
Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，
返回转换的结果。这样，我们就可以通过 require 来加载任何类型的模块或文件，比如
CoffeeScript、 JSX、 LESS 或图片。首先我们需要安装相关Loader插件，css-loader 是
将 css 装载到 javascript；style-loader 是让 javascript 认识css
1
| npm install style-loader css-loader --save-dev
|
1
2
3
4
5
6
7
8
9
10
| npm install --save moduleName 命令
1.安装模块到项目node_modules目录下。
2.会将模块依赖写入dependencies 节点。
3.运行 npm install 初始化项目时，会将模块下载到项目目录下。
4.运行npm install --production或者注明NODE_ENV变量值为production时，会自动下载模块到node_modules目录中。
npm install --save-dev moduleName 命令
1.安装模块到项目node_modules目录下。
2.会将模块依赖写入devDependencies 节点。
3.运行 npm install 初始化项目时，会将模块下载到项目目录下。
4.运行npm install --production或者注明NODE_ENV变量值为production时，不会自动下载模块到node_modules目录中。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| 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']
}
]
}
};
|
- 在src文件夹创建css文件夹,css文件夹下创建css1
1
2
3
| body{
background: blue;
}
|
1
| require('./css/css1.css')
|
其它
vscode Chrome-debug插件
在launch.json中添加
1
2
3
4
5
6
7
8
9
10
11
12
13
| , {
"name": "使用本机 Chrome 调试",
"type": "chrome",
"request": "launch",
"file": "${workspaceRoot}/index.html",
"runtimeExecutable": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
"sourceMaps": true,
"webRoot": "${workspaceRoot}",
"userDataDir":"${tmpdir}",
"port":5433
}
|
