Node.js
什么是 Node.js
Node.js 是一个跨平台 JavaScript 运行环境，使开发者可以搭建服务器端的 JavaScript 应用程序
什么是前端工程化
前端工程化：开发项目直到上线，过程中集成所有工具和技术：
格式化工具、压缩工具、转换工具、打包工具、脚手架工具、等等
Node.js 为何能执行 JS ？
浏览器执行 JS 代码依靠浏览器内核中的 V8 引擎
Node.js 是基于 Chrome V8 引擎进行封装（运行环境）
他们都支持 ECMAScript 标准语法，Node.js 有独立的 API
注意：Node.js 环境中没有 DOM 和 BOM
Node.js 中的模块语法
fs 模块 - 读写文件
模块：类似插件，封装了方法/属性
fs 模块：封装了与本机文件系统进行交互的方法和属性
语法：
加载 fs 模块对象
const fs = require('fs')写入文件对象
fs.writeFile('文件路径','写入内容',er =>{
//写入后的回调函数
})读取文件内容
fs.readFile('文件路径',(err,data) =>{
//读取后的回调函数
//data 是文件内容的 Buffer 数据流，使用data.toString() 可以转为字符串
})path 模块 - 路径处理
问题：在 Node.js 代码中，相对路径是根据终端所在路径来查找的，可能无法找到你想要的文件
解决方法：在 Node.js 代码中，使用绝对路径
__dirname（两个下划线）内置变量，可以获取当前模块目录的绝对路径
注意：
在 mac 和 windows 系统中路径的分隔符不同，可以使用 path.join（），他会使用特定于平台的分隔符
path.join('03','dist','js','index.js')
//windows:'03\dist\js\index.js'
//mac:'03/dist/js/index.js'语法：
加载 path 模块
const path = require('path')使用 path.join 方法，拼接路径
path.join('路径1','路径2',...)
path.join(__dirname,'../text.txt')http 模块 - 创建 Web 服务
方法：
加载 http 模块，创建 Web 服务对象
监听 request 请求事件，设置响应头和响应体
配置端口号并启动 Web 服务
浏览器请求 http://localhost:3000 测试
const http = require('http')
const server = http.createServer()
server.on('request',(req,res) => {
res.setHeader('Content-Type','text/plain;charset = utf-8')
res.end('您好，欢迎使用 node.js 创建的 Web 服务')
})
server.listen(3000,() => {
console.log('Web 服务已启动')
})Node.js 模块化
什么是模块化？
定义：在 Node.js 中，每个文件都被视为一个单独的模块
概念：项目是由很多个模块文件组成的
优点：提高代码复用性，按需加载，独立作用域
使用：需要标准语法导出和导入进行使用
CommonJS 标准
使用：
导出：module.exports = {}
导入：require('模块名或路径')
const baseURL = 'http://averyxgd.top'
const getArraySum = arr => arr.reduce((sum, val) => sum += val, 0)
module.exports = {
对外属性名1:baseURL,
对外属性名2:getArraySum
}模块名或路径：
内置模块：直接写名字（例如：fs、path、http）
自定义模块：直接写模块文件路径（例如：.utils.js）
ECMAScript 标准 - 默认导出和导入
默认标准使用：
导出：export default { }
导入：import 变量名 from '模块名或路径'
const baseURL = 'http://averyxgd.top'
const getArraySum = arr => arr.reduce((sum, val) => sum += val, 0)
export default{
对外属性名1:baseURL,
对外属性名2:getArraySum
}import obj from '模块名或路径'
//obj 就等于 export default 导出的对象注意：Node.js 默认支持 CommonJS 标准语法
如需使用 ECMAScript 标准语法，在运行模块所在文件夹新建 package.json 文件，并设置{'type':'module'}
ECMAScript 标准 - 命名导出和导入
命名标准使用：
导出：export 修饰定义语句
导入：import { 同名变量 } from '模块名或路径'
export const baseURL = 'http://averyxgd.top'
export const getArraySum = arr => arr.reduce((sum, val) => sum += val, 0)import { baseURL, getArraySum } from '模块名或路径'
// baseURL 和 getArraySum 是变量，值为模块内命名导出的同名变量的值如何选择默认导出和命名导出？
按需加载，使用命名导入导出
全部加载，使用默认导入导出
包
包的概念
包：将模块、代码、其他资料聚合成一个文件夹
包分类：
项目包：主要用于编写项目和业务逻辑
软件包：封装工具和方法进行使用
要求：
根目录中必须有 package.json 文件（记录包的清单信息）
{
"name":"utils" 软件包的名称
"version":"1.0.0" 软件包当前版本
"description":"描述" 软件包简短描述
"main":"index.js" 软件包入口
"author":"ww" 软件包作者
"license":"MIT" 软件包许可证（商用后可以用作者名字宣传）
}注意：导入软件包时，引入的默认是 index.js 模块文件/ main 属性指定的模块文件
npm - 软件包管理器
npm 是 Node.js 标准的软件包管理器
起初是作为下载和管理 Node.js 包依赖的方式，但其现在也已成为前端 JavaScript 中使用的工具
使用：
初始化清单文件：npm init -y （得到 package.json 文件，有则略过此命令）
下载软件包：npm i 软件包名称
使用软件包
下载的包会存放在当前目录下的 node_modules 中，并记录在 package.json 中
npm - 安装所有依赖
项目中不包含 node_modules 时不能正常运行
但此怕传递 node_modules 速度慢，使用 npm 速度更快
项目终端输入命令：npm i 可以下载 package.json 中记录的所有软件包
npm - 全局软件包 nodemon
软件包区别：
本地软件包：当前项目内使用，封装属性和方法，存在于 node_modules
全局软件包：本机所有项目使用，封装命令和工具，存在于系统设置的位置
nodemon 作用：代替 node 命令，检测代码更改，自动重启程序
使用：
安装：npm i nodemon -g（-g 表示安装到全局环境中）
运行：nodemon 待执行的目标 js 文件
Webpack
什么是 Webpack ？
Webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 Webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。
静态模块：指的是编写代码过程中的，HTML、CSS、JS、图片等固定内容的文件
打包：把静态模块内容，压缩，整合，转义等（前端工程化）
把 less / sass 转成 css 代码
把 ES6+降级成 ES5
支持多种模块标准语法
使用 Webpack
步骤：
新建并初始化项目，编写业务源代码
下载 webpack webpack-cli 到当前项目中（版本独立），并配置局部自定义命令
npm i webpack webpack-cli --save-dev"scripts":{
"bulid":"webpack"
},运行打包命令，自动产生 dist 分发文件夹（压缩和优化后，用于最终运行的代码）
npm run build
修改 Webpack 打包入口和出口
更改入口起点：
默认为 ./src/index.js
修改 webpack.config.js ：
module.exports = {
entry:"./path",
}更改出口：
默认为 ./dist/main.js
修改 webpack.config.js ：
const path = require('path')
module.exports = {
entry:"./path.js",
output:{
path:path.resolve(__dirname,'dist'),
filename:'my first webpack.bundle.js',
}
}注意：只有和入口产生直接/间接的引入关系的文件才会被打包
Webpack 插件
如：插件 html-webpack-plugin: 在 Webpack 打包时生成 html 文件
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry:path.resolve(__dirname,'dist'),
output:{
path:path.resolve(__dirname,'dist'),
filename:'./login/index.js',
clean:true //生成打包内容之前清空输出目录
}
//插件
plugin:[
new HtmlWebpackPlugin ({
templete:path.resolve(__dirname,'public/login.html'), //模板文件
filename:path.resolve(__dirname,'dist/login/index.html'), //输出文件
})
]
}如：CSS 解释器 css-loader
module.exports = {
module:{
rules:{
{
test:/\.css$/1
use:['style-loader','css-loader']
}
}
}
}