当前位置：首页 > article >正文

webpack03

article 2025/1/12 22:38:22

什么是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转换成目标代码