babel安装和babel编译_babel exe-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_59543485/article/details/118978255

本文介绍了Babel的基本概念，包括其在JavaScript语法转换中的作用。详细讲述了Babel的安装过程，以及如何进行文件编译。重点讨论了.babelrc配置文件中的关键设置，如预设(presets)和插件(plugins)，用于应对现代JavaScript语法的编译问题。

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

1:什么是babel

1：babel是一个JS编译器，用来转换最新的JS语法，比如把ES6,ES7等语法转换为ES5语法，从而可以在大部分浏览器运行，
执行过程分三步：分析，转化，生成代码，但是babel一些最新的api是不转化的，比如Object,assign,Promise，inport,export class等，
所以可以使用插件 babel-pilofill来引入对全部api的支持。

2:babel编译的准备工作

//在使用babel之前需要安装运行node.js运行环境
1:初始化项目,在终端输入命令
npm init
//生成package.json文件



2:.安装 babel 需要的包
//**局部的命令工具: `npx 命令 xxx`,全局省略npx**
//npm install --save-dev xxx xxx, xxx 代表需要下载的包，这里可以这样写
npm install --save-dev @babel/core @babel/cli

//删除包 
npm uninstall xxx xxx --save-dev

3:运行babel
npx babel --version
//输出版本号说明安装成功了

使用bable编译文件

1.你想把js文件夹转译到哪个文件夹去
在初始化的package.json "scripts"中添加
"zhuzhu": "babel src -d dist"
"zhuzhu"名字自定义
然后在想转译的文件夹目录中 运行npm run zhuzhu

//bable不能编译的bug
1:export 转译后不能被浏览器读懂的问题，在终端下载
npm install --save-dev @babel/plugin-transform-modules-umd
2:class类中的static不能转译的问题，在终端下载
npm install --save-dev @babel/plugin-proposal-class-properties

//babelrc文件需要的配置项主要有预设(presets)和插件(plugins)。用来解决不能编译的一些语法

//配置babelrc
{
    "presets": ["@babel/preset-env"],//preset: babel插件集合的预设，包含某一部分的插件plugin
    "plugins": [//plugin: babel的插件，在6.x版本之后babel必需要配合插件来进行工作
        [
            "@babel/plugin-transform-modules-umd",
            {
                "globals": {
                    "es6-promise": "Promise"
                }
            }
        ],
        ["@babel/plugin-proposal-class-properties"]
    ]
}

//运行 npm run zhuzhu