babel是一个用于将es6以上版本的代码转换为向后兼容的JS语法的工具,以便代码在当前版本和旧版本浏览器中正常运行。

babel有在线网站和本地运行两种使用方式。

在线对比工具

本地下载

在线网站优点是方便快捷,但是如果我们想将整个项目的代码都进行对比的话,在线网站用起来就不是那么舒服啦,这时候我们可以选择本地下载该工具,下面将说明下载及环境搭建的步骤。

条件

  • node环境

下载步骤

  • 打开命令行,找到你想要做对比的项目文件并进入
  • 执行npm init -y,创建一个package.json文件
  • 执行npm install @babel/core,下载整个工具最核心的模块,提供核心功能
  • 执行npm install @babel/preset-env,这是一个插件的集合,避免了我们为了不同的语法下载不同的插件,具备了将所有es6语法转换为es5的能力
  • 执行npm install @babel/cli,主要功能是通过命令行npx将js文件进行编译转换

配置文件

在下载完之后,我们需要像webpack一样,为该工具设置一个配置文件,说明用哪些功能进行文件管理

  • 在node_moudules同级下创建配置文件.babelrc,目的是告知在编译某个文件时要使用哪些插件进行编译
  • 该文件中是严格的Json,所以一定要是使用双引号
  • presets意为预设,接下来还需要其他插件的时候,就可以写在plugin中
{
    "presets":[
        "@babel/preset-env"
    ],
    "plugin":[
        ...
    ]
}

举例

下载并配置完babel相关信息后,我们开始简单使用一下看看是否生效

  • 创建一个a.js文件,内容简单写一个es6语法

  • 在命令行中执行npx babel a.js -o b.js

  • 文件名不要有特殊字符

  • 若觉得每次修改后都要执行一次命令行,很麻烦,浪费时间,可以在命令后面增加 --watch,完整的就是npx babel a.js -o b.js --watch,这样就是实时监控编译

  • 执行后,刚才写的简易语法就变啦

学习建议

考虑以前的语法哪里有不足,可以如何改进,当你面对新特性为什么会这样的时候,可以看看babel编译后的结果

0 条评论
作者
状态
  • 发布于 ,2 次更新
  • 最后更新于
  • 被浏览 65 次
  • 被评论 0 次
  • 隶属于 文章 版块
  • 归纳于 JavaScript 分类
  • 收录于 ES6 学习 专辑
标签
二维码
目录