静下心来的个人专栏
上一篇

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';
};

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

X

欢迎加群学习交流

联系我们