webpack03

什么是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

• 插件的使用
  1. 安装依赖

  npm install @babel/core @babel/cli -D
  # 安装插件
  # 转换箭头函数
  npm install @babel/plugin-transform-arrow-functions
  # 将let或者const转换为var
  npm install @babel/plugin-transform-block-scoping
  

  2. 命令行使用插件

  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编译

1. 安装依赖 npm i @babel/preset-env
2. 命令行使用

npx babel ./src/main.js --out-file dist/index.js --presets @babel/preset-env

webpack整合babel

1. 安装依赖 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