Babel初步使用

Babel初步使用

今天我们来看看babel的初步使用,

我们首先需要安装node

当安装好node以后,执行以上代码,可以看到具体的版本输出

其次通过npm init准备项目的结结构

{
  "name": "babelproject",
  "version": "1.0.0",
  "description": "babel use and study",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

现在要使用 Babel,我们需要安装 Babel cli、Babel preset、Babel core,如下所示

执行以下命令安装 babel-cli

npm install --save-dev babel-cli

执行以下命令安装 babel-core

npm install --save-dev babel-core

执行以下命令安装 babel-preset

npm install --save-dev babel-preset-env

安装后,这里是 package.json 中可用的详细信息.

我们已经在项目本地安装了 babel 插件。这样做是为了我们可以根据项目需求以及不同版本的 babeljs 在我们的项目中使用不同的 babel。 Package.json 给出了使用的 babeljs 的版本细节。

为了在我们的项目中使用 babel,我们需要在 package.json 中指定相同的内容,如下所示

{
  "name": "babelproject",
  "version": "1.0.0",
  "description": "babel use and study",
  "main": "index.js",
  "scripts": {
    "babel": "babel",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0"
  }
}

Babel 主要用于编译 JavaScript 代码,具有向后兼容性。现在,我们将在 ES6 -> ES5 或 ES7 -> ES5 以及 ES7->ES6 等中编写我们的代码。

为了向 Babel 提供相同的指令,在执行时,我们需要在根文件夹中创建一个名为 .babelrc 的文件。它包含一个带有预设详细信息的 json 对象,如下所示 -

{
    "presets": [
        "es2015"
    ]
}

我们将创建 JavaScript 文件 index.js 并使用 Babel 将其编译为 es2015。在此之前,我们需要安装es2015预设如下:

npm install --save-dev babel-preset-es2015

在 index.js 中,我们使用箭头函数创建了一个函数,这是 es6 中添加的一个新特性。使用 Babel,我们将代码编译为 es5。

var arrowfunction = ()=>{
    return 'hello world';
}

执行到 es2015,使用以下命令

npx babel index.js

它在 es5 中显示 index.js 代码,如上所示。 

我们可以通过执行如下所示的命令将输出存储在文件中

npx babel index.js --out-file index_es5.js

输出如下:

'use strict';

var arrowfunction = function arrowfunction() {
    return 'hello world';
};

版权声明:著作权归作者所有。

相关推荐

[译]Java 9:一步步迁移项目到Jigsaw(模块化)

Java 9出来了。 我们来试试一个简单的Spring项目。 为了使练习更具挑战性,我们还要尝试使用新的模块系统。 该项目只是一个使用Spring,JDBC和Shedlock的简单示例。1、阅读所有可用的文档和规格说明。 嗯,听起来很无聊。 跳过第一步。2、下载JDK并尝试运行该项目。 我们很幸运,我们所有的依赖只使用公共Jav

初识parcel

webpack是一个很好的web应用打包工具,但是使用webpack需要很多繁琐的配置。parcel则提供了一个零配置的方案,大大简化了使用web应用的工具的难度。Parcel特性Parcel有以下一些特性:1、相比于Webpack, Rollup以及Browserify,Parcel打包时间极快这是Parcel做的一个基准测试,基于一个合理大小的应用,包含1726个模块, 6

Git同步主仓库的代码到fork仓库

首先需要添加主仓库为本地的远程仓库。配置远程仓库1、在本地项目的目录下,查看已配置的远程仓库$git remote -v origin  https://github.com/YOUR_USERNAME/YOUR_FORK.git (fetch) origin  https://github.com/YOUR_USERNAME/

Github同步更新fork仓库命令

克隆fork仓库到本地git clone git@github.com:YOUR-USERNAME/YOUR-FORKED-REPO.git添加源仓库的远程主机cd fork-repogit remote add upstream git://github.com/ORIGINAL-DEV-USERNAME/REPO-YOU-FORKED-FROM.gitgit fetch upstream从源仓

Swift 3从异步调用返回数据

是不能直接在异步调用返回数据,一种替代的方案是向异步调用的函数里传入回调函数,当异步任务完成后,使用回调函数处理结果。Swift 3示例:class func getData(completionHandler: @escaping (data: NSArray) -> ()) {...let task = session.dataTask(with:url) { data, resp

Tomcat 8.5新安装环境初步配置优化

下载安装Tomcatwget http://mirrors.hust.edu.cn/apache/tomcat/tomcat-8/v8.5.37/bin/apache-tomcat-8.5.37.tar.gztar zxf apache-tomcat-8.5.37.tar.gz -C /usr/localmv /usr/local/apache-tomcat-8.5.37 /usr/local/t

Java使用Map.computeIfAbsent()方法简化初始不存在的key

我们在开发过程中,经常会遇到值为Map的Map。这种情况下我们需要先把key的值取出来,然后判断是否为null。如果值为null,则初始化值并把它存放进Map。示例代码:String childKey="2020-01"; User user = new User(); Map<String,Map<String,User>> parentMap = new HashMap