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

Babel初步使用

Babel初步使用

意见和建议