如何在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并创建编译脚本 【如何在NetBeans中使用Babel将ES6 JS自动转换为ES5】第一步, 你需要在项目上安装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文件中的所有脚本, 并使你只需单击它即可执行它。由于只有此命令, 因此只需单击一下即可：