企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
[TOC] ## 使用Babel编译ES6 >1、 下载安装Babel >环境:需要电脑上安装node(node中一般都会自带npm包管理器) >`npm install babel-cli -g` >`npm uninstall babel-cli -g` 之所以在命令行中能直接使用`babel命令`,是因为安装在全局环境下之后,会生成一些xxx.cmd的文件,而这里的xxx就是可以在DOC窗口中执行的命令。 ![](https://box.kancloud.cn/7df5a3f176146d468b6d7fed3cd87ab5_697x294.png) - babel.cmd - babel-node.cmd 开启repl - ... 在执行babel命令后我们可以完成一些编译或则其它任务,主要原因是执行babel命令后,会自动加载一些处理任务的文件 打开babel.cmd ![](https://box.kancloud.cn/155cb30c9ed8b98bfd185db5620d6383_696x462.png) ## 配置.babelrc文件,安装一些语言解析包 >我们需要把.babelrc文件配置在当前项目的根目录下 1、 我们需要把.babelrc文件配置在当前想项目的根目录下(这个文件没有文件名,后缀名是babelrc) 注意事项: - a: 在电脑上不能直接创建没有文件名的文件,我们可以在webstorm中创建,或则使用命令创建 - b:babelrc这个后缀名在某些ws中是不识别的,它其实是一个json文件,我们需要在ws中配置一下(让它隶属于json文件) ![](https://box.kancloud.cn/80deaa52ec5537b2c864550c48382895_1292x596.png) (新版的webstorm不存在这个问题) 2、 添加配置 ``` //.babelrc { "presets":[] //=>存放的是我们编译代码时候需要依赖的语言包 ,"plugins":[] //=>存放的是,我们编译代码时候需要依赖的插件信息 } ``` >3、 安装依赖的语言解析包 >在当前项目的根目录下安装(不是安装在全局),需要特殊注意的是:要在当前项目根目录中打开DOC命令才可以 >`npm install babel-preset-latest`安装最新已经发布的语言标准解析模块 >`npm install babel-preset-stage-2`安装当前还没有发布但是已经进入草案的语言解析模块(如果你的代码中用到了非正式发布的标准语法,我们需要安装他) >... >安装成功之后在当前根目录下会存在一个`node-modules`文件夹,在这个文件夹中有我们安装的模块。 > >4、 完成最后.babelrc文件的配置 ``` { "presets":[ "lates" ,"stage-2" ] //=>存放的是我们编译代码时候需要依赖的语言包 ,"plugins":[] //=>存放的是,我们编译代码时候需要依赖的插件信息 } ``` ## 使用命令编译JS代码 ``` babel --help / babel -h ``` ``` babel --version / babel - V 查看版本号 ``` ``` babel --out-file / babel -o 把某一个JS文件中的ES6代码进行编译 ``` ``` babel --out-dir / babel -d 把一个目录下的所有JS文件中的ES6代码都进行编译 ``` ``` babel --watch / babel -w 监听文件中代码的改变,当代码改变后,会自动进行编译 ``` ![](https://box.kancloud.cn/83b450376c733bcc342325ba9c41cb49_320x145.png)