如何在NetBeans中使用Babel将ES6 JS自动转换为ES5

本文概述

• 要求
• 1.安装Babel并创建编译脚本
• 2.执行编译命令

如果你关心项目, 则可能已经使用ES6的最新语法编写了JavaScript。按照ES6语法编写所有代码的唯一缺点是, 它将与不支持该代码的旧版浏览器不兼容。解决此问题的最佳方法是简单地使用BabelJS编译代码并提供跨浏览器支持。在本教程中, 我们将向你展示如何在NetBeans中自动配置Babel Js将ES6 JS文件转换为ES5。

注意

根据你的工作方式, 这可能不是移植代码的最佳选择, 因为你可能也希望将其最小化。在这种情况下, 建议改用gulp。本教程仅在要将所有ES6 JS文件转换为另一个目录中的ES5版本时才有效。

要求

你将需要在计算机和NPM上安装Node.js。

1.安装Babel并创建编译脚本

第一步, 你需要在项目上安装babel-cli。这将确保你能够从命令行执行(netbeans)babel命令。你可以使用以下命令在你的项目中安装babel-cli模块：

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

安装babel-cli之后, 你将能够编写一个将ES6文件从一个目录构建到另一个目录的命令。为了使你更轻松, 我们编写了一个非常简单的命令来执行上述过程。使用此命令, 我们指定应使用babel-preset-env将es6文件夹的所有内容编译到ES5中, 并且其输出应放置在项目根目录的js目录中(你显然可以更改目录) 。进行更改时自动编译的重点是–watch参数, 它将在每次保存/创建/修改文件时编译ES6代码：

npx babel es6 --watch --presets babel-preset-env --out-dir js

你只需要在package.json文件中注册此命令即可继续, 例如, 在我们的项目中, 我们将其命名为ES6-to-ES5：

{
    "name": "myapp", "version": "1.0.0", "description": "", "scripts": {
        "ES6-to-ES5": "npx babel es6 --watch --presets babel-preset-env --out-dir js"
    }, "author": "", "license": "MIT", "presets": [
        "env"
    ], "devDependencies": {
        "babel-cli": "^6.26.0", "babel-preset-env": "^1.6.1"
    }
}

现在, 你以后可以在NetBeans中运行命令。

2.执行编译命令

在运行命令之前, 应先安装软件包, 以防未使用npm install进行安装。这将安装必需的模块, 你将能够运行ES6-to-ES5脚本。接下来, 选择你的项目或package.json文件, 然后右键单击它, 这将显示带有npm Scripts选项的上下文菜单。这将列出package.json文件中的所有脚本, 并使你只需单击它即可执行它。由于只有此命令, 因此只需单击一下即可：

这将在NetBeans中启动一个新的控制台过程, 该过程首先将当前代码转换为ES5, 然后将其转换为ES5：

在你不希望将ES6文件自动编译到输出目录中的ES5之前, 应打开此过程。通过简单地对代码进行修改, 创建新文件, Babel会将代码从一个目录转换到另一个目录：

注意

每次关闭输出窗口(终止过程)或退出NetBeans时, 都需要再次触发该命令。

如你所见, npm进程仍在后台运行, 因此你可以进行修改, 并且无论如何都将转储文件。

编码愉快！