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
  2. # 安装插件
  3. # 转换箭头函数
  4. npm install @babel/plugin-transform-arrow-functions
  5. # 将let或者const转换为var
  6. npm install @babel/plugin-transform-block-scoping

  复制代码
    
  
  
  • 命令行使用插件
    
  1. 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
  
• 命令行使用
  

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

复制代码

webpack整合babel

• 安装依靠 npm i babel-loader
  

• 通过插件
  

1. const path = require("path");
2. module.exports = {
3.     mode:"development",
4.     devtool: "source-map",
5.     entry:"./src/main.js",
6.     output:{
7.         filename:"bundle.js",
8.         path: path.resolve(__dirname,"./dist")
9.     },
10.    module:{
11.         rules:[
12.             {
13.                 test:/\.js$/,
14.                 exclude:/node_modules/,
15.                 use:[
16.                     {
17.                         loader:"babel-loader",
18.                         options:{
19.                             plugins:[
20.                                 "@babel/plugin-transform-arrow-functions",
21.                                 "@babel/plugin-transform-block-scoping"
22.                             ]
23.                         }
24.                     }
25.                 ]
26.             }
27.         ]
28.    }
29. }

复制代码

• 通过预设
  

1. const path = require("path");
2. module.exports = {
3.     mode:"development",
4.     devtool: "source-map",
5.     entry:"./src/main.js",
6.     output:{
7.         filename:"bundle.js",
8.         path: path.resolve(__dirname,"./dist")
9.     },
10.    module:{
11.         rules:[
12.             {
13.                 test:/\.js$/,
14.                 exclude:/node_modules/,
15.                 use:[
16.                     {
17.                         loader:"babel-loader",
18.                         options:{
19.                             "presets":[
20.                                 "@babel/preset-env"
21.                             ]
22.                             // plugins:[
23.                             //     "@babel/plugin-transform-arrow-functions",
24.                             //     "@babel/plugin-transform-block-scoping"
25.                             // ]
26.                         }
27.                     }
28.                 ]
29.             }
30.         ]
31.    }
32. }

复制代码

使用多个preset:

1.   "presets":[
2.               ["@babel/preset-env",{
3.                   useBuiltIns:"usage",
4.                      corejs:3.8
5.                  }],
6.                  ["@babel/preset-react"],
7.                  ["@babel/preset-typescript"]
8.              ]

复制代码

什么是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，包会变大
  

1.     "presets":[
2.                   ["@babel/preset-env",{
3.                           useBuiltIns:"usage",
4.                              corejs:3.8
5.                          }]
6.                      ]

复制代码

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
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。