一.背景
浏览器不支持es Module, 所以需要使用webpack模块打包器来转换模块化文件来可以使浏览器识别。
ES Module是前端模块化的语法规范。
JavaScript没有模块化一直是它的痛点，所以才会产生CommomJS,AMD,CMD。ES Module是ECMA自己推出的代码规范。
二.ES Module
- ES Module模块化采用export负责导出模块内的内容，使用import负责导入其他模块。
(1). export 语法 { 标识符 }
(2). import { } from ‘文件’（不允许写到js代码中）
(3). export和import的结合使用
(4). 默认导出（一个模块只能有一个默认导出）
-
ES Module默认采用严格模式： ‘use strict’
-
引入不同js文件，相当于被引入同一个html作用域。
-
告诉当前的js文件是模块化的，script标签上的type属性
5. 在我们打开对应的html时，如果html中使用模块化的代码，那么必须开启一个服务器来打开。
因为import 引入文件，浏览器去下载，跨域是不支持本地协议。
- 如果逻辑成立时，才需要导入某个模块。（import函数，且import()返回的是promise）
优化后的：
7. ES Module的解析过程
加载js生成module 记录 -> 实例化（解析模块的导入和导出语句） -> 根据导入导出语句生成模块环境记录 -> 运行代码将值赋值到模块环境记录的对应的变量里面
三.包管理工具
-
npm包管理工具（Node Package Manager 就是Node包管理器,但是目前已经不仅仅是Node包管理器了，在前端项目中我们也在使用它来管理依赖的包）
-
npm 配置文件（package.json） 记录项目名称，版本号和项目描述，以及一些项目依赖的其他库信息和依赖库版本号
-
生成方式：
手动生成（npm init -y）
通过脚手架创建项目，自动生成package.json -
package.json配置项
5. package-lock.json 是在
npm install时候生成一份文件，用来记录当前状态下实际安装的各个npm package的具体来源和版本号
6. npm-insatll原理
7.发布npm包需要的命令
npm login 登录npm账号
npm publish 发布
8. 通过npm init 生成package.json -> npm install安装需要的依赖 -> 在src目录下面的index.js使用依赖(webpack默认的打包入口文件) -> 运行 npx webpack 生成dist目录
-> 将dist目录下生成的文件引入到index.html来查看运行结果
三.yarn管理工具
生成package.json文件是一样的
yarn add === npm install
yarn run === npm run
四. npx
npx寻找本目录下面的node_modules里面.bin下面的命令；在package.json里面scripts配置项配置的脚本，会优先找node_modules里面的命令
五. pnpm
1.什么是pnpm
2.硬链接和软链接概念
3.pnpm 做了什么
4.pnpm的命令
5.pnpm的store
