您现在的位置是:首页 > 正文

Babel转码器入门

2024-01-30 22:24:05阅读 0

现在ES6非常火,但是有些特性浏览器还未完全支持,这样如果你写的代码是ES6的话,你就需要一款神器可以帮你将ES6的代码转为ES5,从而在现有的环境中执行。

接下来就跟大家分享如何使用Babel这个神器。

首先,我们需要在我们电脑上安装Node环境,
Node下载,然后像装其他软件一样在你的电脑上安装,
安装成功后,cmd进入命令行窗口,键入

node -v

这里写图片描述
输入以上结果即证明你安装成功。

执行命令 node init 初始化项目,在该目录下回生成package.json文件
创建一个项目文件夹,如ES6Study,进入ES6Study文件夹,创建一个app文件夹和一个public文件夹,在app文件夹下创建Greeter.js文件

// Greeter.js
module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings!";
  return greet;
};

再创建一个main.js文件

//main.js 
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());

在项目的根目录下(在这里为ES6Study文件夹下)创建一个.babelrc文件,这是Babel 的配置文件。使用使用 Babel 的第一步,就是配置这个文件。
(我直接创建这个文件时window提示要输入文件名,我用sublime新建保存就可以了)

该文件用来设置转码规则和插件,在你的.babelrc文件中加入:

{
    "presets": [
      "latest",
      "react",
      "stage-2"
    ],
    "plugins": []
  }

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

# 最新转码规则
$ npm install --save-dev babel-preset-latest

# react 转码规则
$ npm install --save-dev babel-preset-react

# 不同阶段语法提案的转码规则(共有4个阶段),选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

接下来安装命令行转码工具babel-cli,在命令行中键入:

npm install --global babel-cli

命令行转码用法如下:

# 转码结果输出到标准输出
$ babel example.js

# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib

# -s 参数生成source map文件
$ babel src -d lib -s

注:
上面代码是在全局环境下,进行 Babel 转码。这意味着,如果项目要运行,全局环境必须有 Babel,也就是说项目产生了对环境的依赖。另一方面,这样做也无法支持不同项目使用不同版本的 Babel。

一个解决办法是将babel-cli安装在项目之中。

# 安装
$ npm install --save-dev babel-cli

然后,改写package.json

 {
     "scripts": {
    "build": "babel app/ -d lib"
  },
 "devDependencies": {
    "babel-cli": "^6.26.0"
  },
  }

npm 允许在package.json文件里面,使用scripts对象定义脚本命令,它的每一个属性,对应一段脚本。比如医生build命令对应的脚本是“babel app/ -d lib”;
“babel app/ -d lib”意思是将app目录下全部文件转码输出到同路径下的lib目录下(没有lib文件夹会自动帮你创建);当使用npm run build命令时,就相当于执行
“babel app/ -d lib”,你可以自己配置;
devDependencies中的依赖项是开发的时候所需要的依赖项,比如一些进行单元测试之类的包,在生产环境中是不需要的;

我们可以试下Babel的转码了,
在app目录下创建一个example.js

//example.js
input.map(item => item + 1);  //箭头函数的ES6的特性

保存后命令行执行

npm run build

执行后,你可以看到项目下多了一个lib目录,里面有example.js文件,打开看:

"use strict";

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

已经帮你转成ES5的语法了

以上文章参考阮一峰老师的ECMAScript6,内容非常详尽大家可前往学习!

网站文章

  • 谈谈代码中的this

      js中我们常常会遇到this,this的具体指向问题对于很多同学来说是很懵懂的;就想lz刚开始接触时候就是一脸的懵逼,经常被一些题目转的眼花缭乱。那么今天lz就跟大家一起交流一下这个this的指向问题!  背景:不久前有个同事给我们发了一道有关this的题目,于是便有了今天的故事。如下题:class D0XX { constructor () { this...

    2024-01-30 22:23:58
  • vue3 开启 https

    vue3 开启 https

    会在当前目录生成,cert.crt 和 cert.key 两个文件。会在当前目录生成,ca.crt 和 ca.key 两个文件。

    2024-01-30 22:23:29
  • 软件工程≠计算机科学 之 思考

    软件工程≠计算机科学首先,这篇文章的英文比上次阅读作业的英文好懂多了可能是因为上次的多是讲技术的,可以归类为科技英语吧,好多的词都不认识这次更偏向于议论文吧We need software that can be put together in a reasonable amount of time, for a reasonable cost, that works som...

    2024-01-30 22:23:21
  • 用电脑开热点启用电脑无线配置

    用电脑开热点启用电脑无线配置

    电脑系统打开热点,不用安装360也能用电脑给手机开热点,给多电脑开热点无线。

    2024-01-30 22:23:16
  • 【算法竞赛学习】数字中国创新大赛智慧海洋建设-Task3特征工程

    智慧海洋建设-Task3 特征工程此部分为智慧海洋建设竞赛的特征工程模块,通过特征工程,可以最大限度地从原始数据中提取特征以供算法和模型使用。通俗而言,就是通过X,创造新的X’以获得更好的训练、预测效...

    2024-01-30 22:22:46
  • 进阶面向对象

    进阶面向对象

    对象是具体的事物,拥有所属类中描述的一切属性和行为。类是一种模型,这种模型可以创建出不同的对象实体。一个类可以有很多对象,而一个对象必然属于某个类。类用于抽象的描述一类事物所特有的属性和行为。将日常生...

    2024-01-30 22:22:39
  • 沈阳师范大学大一上册C语言PTA题目集以及答案(第六章 指针 编程题篇)

    沈阳师范大学大一上册C语言PTA题目集以及答案(第六章 指针 编程题篇)7-1 输出学生成绩 (20分)本题要求编写程序,根据输入学生的成绩,统计并输出学生的平均成绩、最高成绩和最低成绩。建议使用动态...

    2024-01-30 22:22:32
  • 常用的CMD命令+Python

    cd .. 返回上一级目录 cd ../.. 返回上两级目录 cd或cd ~ 返回home目录 cd - 目录名 返回指定目录 输入“cd\”敲回车会直接退回到当前盘根目录 在CMD程序里输入“d:”...

    2024-01-30 22:22:23
  • 远程服务和web服务和前端,三方通过socket和websocket进行双向通信传输数据

    在计算机通信领域,socket 被翻译为“套接字”,它是计算机之间进行通信的一种约定或一种方式。通过 socket 这种约定,一台计算机可以接收其他计算机的数据,也可以向其他计算机发送数据。WebSocket是一种网络通信协议,是HTML5新增的特性,实现了基于浏览器的远程socket,使浏览器和服务器可以进行全双工通信。

    2024-01-30 22:21:55
  • RIPng配置(GNS3)

    RIPng配置(GNS3)

    1、拓扑图2、配置路由器(R3为例)给每个路由器配置RIP 1在每个路由器中对相应的接口配置相应的ipv6地址并将每个接口配置RIP 1 enable给R3的f0/0接口配置宣告默认路由给ISP配置静态路由3、测试网络连通性PC-1 ping PC-2 PC-4和外网PC-2 ping PC-1 P...

    2024-01-30 22:21:47