这是我参与「第四届青训营 」笔记创作活动的第9天
Node的应用场景
- 前端工程化（webpack、vite等）
- Web服务端
- 跨端桌面应用
Node的运行结构
node特点
- 异步IO
- 单线程
- 跨平台（开发成本、学习成本低）
编写http server
🌰：
客户端：
webpack（前端编译、打包工具）
传统的资源管理：（效率低）
- 依赖手工
- 严格按照依赖顺序书写
- 难以嵌入TS或者JS新特性、css预处理工具
- 不同类型管理模型不同
使用方式：
- 安装依赖，执行指令
npm i -D webpack webpack-cli - 编辑配置文件
- 执行编译命令
npx webpack
核心流程：入口处理——>依赖收集——>资源解析——>资源打包合并
- 入口处理：从‘entry’文件开始，启动编译流程
- 依赖收集：从‘entry’文件开始，根据require或者import收集依赖
- 资源解析：根据module配置，调用资源转移器，将css、png等非标准资源转化为JS（递归调用第二、第三步骤，直到所有资源处理完毕）
- 资源打包合并：将资源打包成能够直接在浏览器运行的js文件
书写配置文件
- 流程类（直接影响打包效果）
- 工具类（提供更多工程化能力）
🌰 文件结构如图所示：
声明入口文件：
声明出口：
执行编译命令
npx webpack
css处理使用loader:css-loader、style-loader
Bable
用途：转码器。把高版本的js转义为低版本，实现兼容。 具体功能：
- Plugins，配置相应插件。（npm下载插件后，添加到bable的配置文件中babel.config.json 或者 .babelrc）
- Presets 预设，将一些常用的插件配置放入预设。
- plolyfill垫片。bable默认只转换新的js语法，比如箭头函数等，不转换新的API比如promise、set等，想要使用这些就要用垫片。
//.babelrc
{
"plugins":[
"@babel/plugin-transform-arrow-functions" //将箭头函数转换为普通函数
],
"presets":["preset-env" ]
}
生成HTML
生成的html有什么优缺点（用于后端渲染，加载速度快，但是引入文件需要用插件）
tree shaking
可以删除没有用到的库、代码，减少打包体积。
Loader
用于处理非标准（js）的资源，将他转化为标准js
