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

webpack5零基础入门-10babel的使用

Babel

JavaScript 编译器。

主要用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中

1.安装相关包

npm install -D babel-loader @babel/core @babel/preset-env 

 

2.进行相关配置

2.1第一种写法是在webpack的module中新增rule并配置options,这种写法比较简单

{
                test: /\.js$/,
                /**排除哪些文件 */
                exclude: /(node_modules)/,
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                    },
            },

因为只需要用到babel-loader我们不需要使用use直接用loader即可 

2.1第一种写法是在webpack的module中新增rule并配置options,这种写法比较简单

{
                test: /\.js$/,
                /**排除哪些文件 */
                exclude: /(node_modules)/,
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                    },
            },

因为只需要用到babel-loader我们不需要使用use直接用loader即可

2.2第二种写法是通过babel.config.js进行options的配置

查看未配置babel前打包生成的dist.js可以发现箭头函数和...符号未被编译,还是es6的语法

 

 配置后重新打包发现编译成es5的语法了

 


http://www.kler.cn/a/272037.html

相关文章:

  • [Computer Vision]实验二:图像特征点提取
  • C++ 在2D与3D游戏的开发库
  • 在 vscode + cmake + GNU 工具链的基础上配置 JLINK
  • Visual Studio2019调试DLL
  • Ext2 文件系统:数字世界的基石,深度解码超时空存储魔法
  • 网络协议如何确保数据的安全传输?
  • 第三篇 - 概述- IAB受众和技术标准 - IAB视频广告标准《数字视频和有线电视广告格式指南》
  • 【AI】机器学习是什么?
  • 【Fitten Code】“吊打“Github Copilot的国内免费代码辅助插件
  • 在idea中配置tomcat服务器,然后部署一个项日
  • Redis的安全配置有哪些建议?如何防止未授权访问?Redis的监控与告警策略是怎样的?如何及时发现并解决潜在问题?
  • 修复 error Delete `␍` prettier/prettier 错误
  • excel封装和ddt D17
  • 使用VLC实现自动播放视频
  • 对象的组合复用学习笔记
  • electron 学习
  • C++ 多路音频pcm混音算法
  • Web核心,HTTP,tomcat,Servlet
  • 力扣练习题2
  • 文件夹秒变应用程序?别慌,数据恢复有妙招!
  • 安装Pytorch——CPU版本
  • Rust 的 HashMap
  • 04- 人有多大胆,地有多大产 到 按需分配 - sealed JDK17
  • Python电梯楼层数字识别
  • 力扣--二叉树的最近公共祖先
  • Linux查看硬件型号详细信息