网站模板双语,怎么分享网站,青岛网络优化公司,营口建设工程信息网站什么是source-map
将代码编译压缩之后#xff0c;#xff0c;可以通过source-map映射会原来的代码#xff0c;#xff0c;#xff0c;在调试的时候可以准确找到原代码报错位置#xff0c;#xff0c;#xff0c;进行修改 source-map有很多值#xff1a;
eval #…什么是source-map
将代码编译压缩之后可以通过source-map映射会原来的代码在调试的时候可以准确找到原代码报错位置进行修改 source-map有很多值
eval 会在eval执行的代码后面添加 source-mapsource-map : 生成一个独立source-map在整个打包后的js后面eval-source-map 会在eval执行代码的后面添加source-map…但是这个source-map是以Data urlbase64编码嵌入进去的。。。。为什么写在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-maphidden-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模式
nonedevelopmentproduction 默认
development 和 production 下面分别有自己的配置相当于设置一个,就等于默认使用了配置好的参数
在 development模式下的 source-map 是 eval,production默认是没有source-map
babel
Babel是一种javascript编译器
es6转换成浏览器兼容的javascripttypescript转换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 --pluginsbabel/plugin-transform-arrow-functions,babel/plugin-transform-block-scopingpreset 预设的使用 Babel中除了插件(Plugins)外还有一种叫预设(Presets)的概念预设是Babel的一组插件的组合针对特定的目标封装了多个插件的配置让开发者不需要一个个手动配置插件。。他会帮你去找对应的插件解析预设的分类babel/preset-env : 将高级js 》 浏览器识别的jsbabel/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-envwebpack整合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
