0
点赞
收藏
分享

微信扫一扫

Babel转码器的使用

Babel 是一个广泛使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码,从而在老版本的浏览器执行。这意味着,你可以用 ES6 的方式编写程序,又不用担心现有环境是否支持。下面是一个例子。

转码前:

input.map(item => item + 1);

转码后:

input.map(function (item) {
  return item + 1;
});

这里把ES6才有的匿名函数转化成了普通函数,可以让程序在不支持ES6的浏览器运行。


Babel的安装

下面的命令在项目目录中,安装 Babel。

$ pnpm install -D @babel/core

配置文件.babelrc

Babel 的配置文件是.babelrc,存放在项目的根目录下。使用 Babel 的第一步,就是配置这个文件。

该文件用来设置转码规则和插件,基本格式如下。

{
  "presets": [],
  "plugins": []
}

presets字段设定转码规则,官方提供以下的规则集,你可以根据需要安装。

pnpm install -D @babel/preset-env

然后,将这些规则加入.babelrc

{
    "presets": [
      "@babel/env",
      "@babel/preset-react"
    ],
    "plugins": []
  }

注意,以下所有 Babel 工具和模块的使用,都必须先写好.babelrc。否则,在执行Babel编译是无效的。

命令行转码

Babel 提供命令行工具@babel/cli,用于命令行转码。

它的安装命令如下。

$ npm install --save-dev @babel/cli

基本用法如下。

在package.json加入脚本:

babel src -d dist

这样src文件夹的代码就会编译到dist里面了。

举报

相关推荐

0 条评论