webpack基础(四)——babel

最新推荐文章于 2025-04-24 10:43:10 发布

卖菜的小白

最新推荐文章于 2025-04-24 10:43:10 发布

阅读量3.3k

点赞数 1

分类专栏： webpack 文章标签： webpack javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_47450807/article/details/122740893

版权

本文介绍了babel在前端开发中的作用，它用于将现代JavaScript语法转换为老版本浏览器兼容的代码。文章详细讲解了babel的基本使用，包括独立使用babel进行代码转换，以及在webpack中配置babel，特别提到了在webpack中使用babel需要安装相应的插件和预设，以确保箭头函数等现代语法能被正确转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、babel介绍
在开发中我们经常使用ES6+，typescript等语法，但是在打包后，这些代码浏览器不能识别，所以此时我们使用babel来解决该问题。
babel定义：babel是一个工具链主要用于将ES6+语法兼容老版本的浏览器。
二、babel简单使用
babel是一个独立的工具，可以不在webpack中使用。
@babel/core：babel核心代码必须安装
@babel/cli:在命令行执行babel代码
npm install @babel/core @babel/cli -D

//需要转换的代码
['张三', '李四', '王五', '赵六'].forEach(item => console.log(item))
const username = "lizi"
const age = 20
console.log(username)
console.log(age)
//执行的命令
npx babel index.js --out-dir dist
//运行后的结果
['张三', '李四', '王五', '赵六'].forEach(item => console.log(item))
const username = "lizi"
const age = 20
console