什么是source-map
将代码编译压缩之后，，可以通过source-map映射会原来的代码，，，在调试的时候可以准确找到原代码报错位置，，，进行修改
source-map有很多值：
- eval ： 会在eval执行的代码后面添加 source-map
- source-map : 生成一个独立source-map，，在整个打包后的js后面
- eval-source-map ： 会在eval执行代码的后面添加source-map…但是这个source-map是以
Data url（base64编码）嵌入进去的。。。。为什么写在eval()中，因为这种source-map的魔法注释，只有在eval()函数中才生效，，其他函数不生效 - inline-source-map ： 生成sourcemap，在打包js的后面，但是是以
Data url形式 - cheap-source-map : 会生成sourcemap，但是会更高效一些，因为他没有生成列映射(column mapping),也就是说，，只会定位到哪一行错了，，不会定位到哪一列
- cheap-module-source-map: 在
cheap-source-map的基础上，对来自于loader的source-map会处理的更好，，，，，当代码被loader处理过，，比如说ts-loader，，使用cheap-source-map映射出的代码，是有一些差距的，，需要使用cheap-module-source-map - hidden-source-map : 会生成sourcemap，但是不会对 source-map文件进行引用，，相当于删除了打包文件中对sourcemap的引用注释
- nosources-source-map ： 会生成sourcemap，但是生成的sourcemap只有错误信息的提示，不会生成源代码文件
vue脚手架使用的是 source-map
react脚手架使用 cheap-module-source-map ,
开发或者测试阶段： 推荐使用 source-map 和 cheap-module-source-map
发布阶段： 不写
source-map 结构
- version ： 版本
- file： 打包之后生成的文件名
- mapping ： source-map的核心，描述编译后代码的每一行，以及他和源代码的映射关系
- names： 丑化js之后，，转换之前的变量 和 丑化的变量，，的对应关系
- sources ： 源文件js，的位置
- sourcesContent： 源文件内容数组，，与sources对应
- sourceRoot: 源文件的相对根目录，，可以和
sources中的路径拼接，构成完整路径
浏览器会根据注释去加载source-map，还原源代码
wepack中mode模式：
- none
- development
- production ： 默认
development 和 production 下面分别有自己的配置，，相当于设置一个,就等于默认使用了配置好的参数，，，
在 development模式下的 source-map 是 eval,production默认是没有source-map
babel
Babel是一种javascript编译器：
- es6转换成浏览器兼容的javascript
- typescript转换
- jsx转换 ===》 vue中也可以用jsx
本质是一个工具链，和postcss很类似，，，是一种微内核架构,只会保留自己的核心代码，，， 自己可以写插件扩展功能
babel命令行使用
插件的使用
babel他可以脱离webpack使用，，，命令行使用需要@babel/cli
- 插件的使用
- 安装依赖
npm install @babel/core @babel/cli -D # 安装插件 # 转换箭头函数 npm install @babel/plugin-transform-arrow-functions # 将let或者const转换为var npm install @babel/plugin-transform-block-scoping- 命令行使用插件
npx babel ./src/main.js --out-file dist/index.js --plugins=@babel/plugin-transform-arrow-functions,@babel/plugin-transform-block-scoping - preset 预设的使用
Babel中除了插件(Plugins)外，，还有一种叫预设(Presets)的概念，，，预设是Babel的一组插件的组合，，针对特定的目标，封装了多个插件的配置，，让开发者不需要一个个手动配置插件。。他会帮你去找对应的插件解析，，预设的分类： @babel/preset-env: 将高级js ===》 浏览器识别的js@babel/preset-react: 支持 jsx编译@babel/preset-typescript: 支持typescript编译
- 安装依赖
npm i @babel/preset-env - 命令行使用
npx babel ./src/main.js --out-file dist/index.js --presets @babel/preset-env
webpack整合babel
- 安装依赖
npm i babel-loader
- 通过插件
const path = require("path");
module.exports = {mode:"development",devtool: "source-map",entry:"./src/main.js",output:{filename:"bundle.js",path: path.resolve(__dirname,"./dist")},module:{rules:[{test:/\.js$/,exclude:/node_modules/,use:[{loader:"babel-loader",options:{plugins:["@babel/plugin-transform-arrow-functions","@babel/plugin-transform-block-scoping"]}}]}]}
}- 通过预设
const path = require("path");
module.exports = {mode:"development",devtool: "source-map",entry:"./src/main.js",output:{filename:"bundle.js",path: path.resolve(__dirname,"./dist")},module:{rules:[{test:/\.js$/,exclude:/node_modules/,use:[{loader:"babel-loader",options:{"presets":["@babel/preset-env"]// plugins:[// "@babel/plugin-transform-arrow-functions",// "@babel/plugin-transform-block-scoping"// ]}}]}]}
}使用多个preset:
"presets":[["@babel/preset-env",{useBuiltIns:"usage",corejs:3.8}],["@babel/preset-react"],["@babel/preset-typescript"]]
什么是polyfill
polyfill: 填充材料，，填充物，，可以理解成补丁，，主要是为了给在旧版本浏览器不支持的js新特性加补丁，，poilyfill是一种代码实现，，他提供了现代JavaScript特性的“模拟实现”，，当目标环境不支持该特性时，，polyfill会为其提供一个实现,让旧的浏览器支持这些新特性，，，比如Promise ,Symbol 等
Babel提供的polyfill插件：@babel/plugin-transform-runtime
在使用@babel/preset-env时，可以配置polyfill来提供支持，，需要配置useBuiltIns,这个useBuiltIns 有三个属性：
- false ： 打包后的文件不使用polyfill来配置
- usage ：会根据源代码中的语言特性，自动检测所需要的polyfill，，，， 这样可以让最终包里面的polyfill最小化，
- entry ： 这个会根据browserlist目标 导入所有的polyfill，包会变大
"presets":[["@babel/preset-env",{useBuiltIns:"usage",corejs:3.8}]]
babel编译器执行过程
源代码 ===》 词法分析(Lexical Analyse) ===> 将词法分析的每个词变成tokens ==》token :
{type:类型,value:值}. ===> 语法分析 ===>>
不同语言进行不同的翻译 ===》 抽象语法树 AST ===〉 遍历这个树（traversal） ===》 访问节点值(visitor) ===> 将每一个节点通过插件进行转换 ===〉 变成新的AST ===》 AST转换成目标代码
babel的配置文件
babel的配置也可以写到一个独立的文件，，
babel.config.json.babelrc.json
rc: run commands. 或者。run configuration的缩写
名词
- 魔法注释： 浏览器会处理的注释，，类似：打包之后的js引入source-map一样
- 多包管理 ： 比如element-plus ，，每一个组件都是一个包，都有自己的入口文件，有
package.json
