【学习打卡】第8天 babel + webpack
2022/8/14 4:22:56
本文主要是介绍【学习打卡】第8天 babel + webpack,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
课程名称:前端框架及项目面试 聚焦 Vue3/React/Webpack
课程章节:第 10 章 webpack 和 babel
主讲老师:双越
课程内容:
今天学习的内容包括:
10-21 babel 基本概念串讲
10-22 babel-polyfill 是什么
10-24 babel-runtime 是什么
这几节主要是 babel 讲解,后续几节主要是复习和面试题
课程收获:
大概复述一下
babelrc 配置
preset:常用 plugin 集合
@babel/preset-env ES6
@babel/preset-flow
@babel/preset-react 解析 jsx 语法
@babel/preset-typescript 解析 ts 语法
{ "presets": [ [ // 常用 plugin 集合 "@babel/preset-env", // babel-polyfill 按需引入 { "useBuiltIns": "usage", "corejs": 3 } ] ], "plugins": [ [ "@babel/plugin-transform-runtime", { "absoluteRuntime": false, "corejs": 3, "helpers": true, "regenerator": true, "useESModules": false } ] ] }
babel-polyfill
polyfill: 低版本实现 ES 高版本新语法。
以下两者集合:
corejs 库:除了 generator 外,ES 高版本 polyfill 集合
regenerator:generator 函数的 polyfill
babel 不处理模块化,不处理 promise
polyfill 本身比较大,按需引入
{ "useBuiltIns": "usage", "corejs": 3 }
polyfill 缺陷
可以作为独立的 web 系统没问题,但作为三方库会污染全局环境
污染全局环境:
window.Promise = function() {//…}
不污染全局环境:
window._Promise = function() {//…}
babel-runtime 解决污染全局
安装:
dependencies “@babel/runtime”: "^7.7.5"
devDependencies “@babel/plugin-transform-runtime”: “^7.7.5”,
为何要打包
tree-shaking 压缩合并后体积更小,加载更快
能编译高级语法 (Ts, Es6, 模块化, scss)
兼容性和错误提示 (Polyfill, postcss, eslint)
统一高效开发环境
同意构建流程产出标准
集成公司构建规范
loader plugin 区别
loader 模块转换器 eg. less-loader less 转 css, babel-loader
plugin 扩展插件 DefinePlugin htmlWebpackPlugin
babel 和 webpacK 区别
babel-js 新语法编译工具,不管模块化
webpack 打包工具,多个 loader\ plugin 集合
产出 lib
output: { // lib 文件名 filename: '', // 输出 lib 到 dist 目录下 path: distPath, // lib 全局变量名 library: 'loadsh' }
proxy 不能被 Polyfill
function 模拟 class,callback 模拟 Promise
proxy 没法模拟,Object.defineProperty 不行
这篇关于【学习打卡】第8天 babel + webpack的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-04-16软路由代理问题, tg 无法代理问题-icode9专业技术文章分享
- 2024-04-16程序猿用什么锅-icode9专业技术文章分享
- 2024-04-16自建 NAS 的方案-icode9专业技术文章分享
- 2024-04-14ansible 在远程主机上执行脚本,并传入参数-icode9专业技术文章分享
- 2024-04-14ansible 在远程主机上执行脚本,并传入参数, 加上remote_src: yes 配置-icode9专业技术文章分享
- 2024-04-14ansible 检测远程主机的8080端口,如果关闭,则echo 进程已关闭-icode9专业技术文章分享
- 2024-04-14result 成功怎么写-icode9专业技术文章分享
- 2024-04-14stopped 状态设置为变量,由外部传递进来-icode9专业技术文章分享
- 2024-04-14为什么ansible执行远程脚本需要放到后台-icode9专业技术文章分享
- 2024-04-14shell 正则判断字符串内是否含有th-icode9专业技术文章分享