### Node.js、Webpack 和 ES6 相关知识点
#### 一、Node.js 基础
**1.1 什么是 Node.js**
Node.js 是一种能够让 JavaScript 运行在服务器端的技术，它允许开发者使用 JavaScript 来编写服务器端的应用程序。Node.js 的核心是 Chrome V8 JavaScript 引擎，这意味着它具有高性能的执行速度。Node.js 的设计采用了事件驱动、非阻塞 I/O 模型，这种模型使得它非常适合构建轻量级、高性能的服务端应用。
**1.2 Node.js 安装**
- **下载与安装**：
- 访问 [https://nodejs.org/en/download/](https://nodejs.org/en/download/) 下载适合您操作系统的 Node.js 版本。
- 推荐下载 LTS(Long Term Support)版本，因为它提供了长期的支持与稳定性。
- 参照资料中的 `NodeJS安装说明.pdf` 文件进行安装指导。
- **验证安装**：
- 在命令行或终端中输入 `node -v` 查看 Node.js 版本，确认安装成功。
**1.3 快速入门**
- **基本命令行输出**：
- 创建一个名为 `demo1.js` 的文件，其中包含以下代码：
```javascript
var a = 1;
var b = 2;
console.log(a + b);
```
- 在命令行中运行 `node demo1.js` 来执行这段代码。
- **使用函数**：
- 创建一个名为 `demo2.js` 的文件，其中包含一个函数 `add`：
```javascript
function add(a, b) {
return a + b;
}
var c = add(100, 200);
console.log(c);
```
- 在命令行中运行 `node demo2.js`。
- **模块化编程**：
- 创建两个文件 `demo3_1.js` 和 `demo3_2.js`，并在 `demo3_1.js` 中定义一个函数 `add` 并导出：
```javascript
exports.add = function(a, b) {
return a + b;
};
```
- 在 `demo3_2.js` 中引入并使用这个函数：
```javascript
var demo = require('./demo3_1');
console.log(demo.add(400, 600));
```
- **创建 Web 服务器**：
- 使用 Node.js 内置的 `http` 模块创建一个简单的 HTTP 服务器：
```javascript
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://127.0.0.1:8888/` 来测试服务器。
- **服务端渲染**：
- 创建一个名为 `demo5.js` 的文件，其中包含一个循环来动态生成 HTML 内容：
```javascript
var http = require('http');
http.createServer(function (request, response) {
// 发送 HTTP 头部
// HTTP 状态值: 200 OK
// 内容类型: text/html
response.writeHead(200, {'Content-Type': 'text/html'});
// 发送响应数据
for (var i = 0; i < 10; i++) {
response.write('<p>Hello World</p>');
}
response.end();
}).listen(8888);
console.log('Server running at http://127.0.0.1:8888/');
```
- 在浏览器中访问 `http://127.0.0.1:8888/`，查看服务端渲染的结果。
- **接收参数**：
- 创建一个名为 `demo6.js` 的文件，用来接收 URL 参数：
```javascript
var http = require('http');
http.createServer(function (request, response) {
// 发送 HTTP 头部
// HTTP 状态值: 200 OK
// 内容类型: text/html
response.writeHead(200, {'Content-Type': 'text/html'});
// 获取请求 URL
var url = request.url.slice(1); // 去掉开头的 "/"
if (url) {
response.write('<p>你请求的 URL 是: ' + url + '</p>');
} else {
response.write('<p>没有 URL 参数</p>');
}
response.end();
}).listen(8888);
console.log('Server running at http://127.0.0.1:8888/');
```
#### 二、Webpack
Webpack 是一个现代 JavaScript 应用程序的静态模块打包器。它接受模块并根据依赖关系图将它们打包到静态文件中，用于 Web 应用程序。Webpack 的主要功能包括：
- **加载模块**：通过 loader 加载不同类型的资源，如 CSS、图片等。
- **解析模块**：分析应用程序结构并确定如何打包。
- **优化代码**：压缩代码、提取公共代码等，提高性能。
- **生成文件**：将所有模块打包到最终的输出文件中。
要使用 Webpack，首先需要安装它：
```bash
npm install webpack --save-dev
```
然后可以通过配置文件 `webpack.config.js` 来指定 Webpack 如何打包你的应用。
#### 三、ES6 (ECMAScript 2015)
ES6 是 JavaScript 的一个版本，引入了许多新特性，使开发变得更加高效和优雅。以下是一些重要的特性：
- **let 和 const**：
- `let`：声明一个局部变量，可以重新赋值。
- `const`：声明一个常量，一旦声明就不能改变其值。
- **解构赋值**：
- 可以直接从数组或对象中提取值，按变量名匹配赋值。
例如：
```javascript
let obj = { x: 10, y: 20 };
let { x, y } = obj;
console.log(x, y); // 输出：10 20
```
- **模块化**：
- ES6 引入了 `import` 和 `export` 语法，用于更方便地管理代码的模块化。
- 示例：
```javascript
// module1.js
export function add(a, b) {
return a + b;
}
// app.js
import { add } from './module1';
console.log(add(1, 2)); // 输出：3
```
以上介绍了 Node.js、Webpack 和 ES6 的基础知识以及如何使用它们进行开发。这些技术在现代 Web 开发中扮演着至关重要的角色，了解和掌握它们对于成为一名优秀的前端或全栈开发者来说非常重要。
