本文概述
- 要求
- 1.安装Babel并创建编译脚本
- 2.执行编译命令
注意 根据你的工作方式, 这可能不是移植代码的最佳选择, 因为你可能也希望将其最小化。在这种情况下, 建议改用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文件中的所有脚本, 并使你只需单击它即可执行它。由于只有此命令, 因此只需单击一下即可:
文章图片
这将在NetBeans中启动一个新的控制台过程, 该过程首先将当前代码转换为ES5, 然后将其转换为ES5:
文章图片
在你不希望将ES6文件自动编译到输出目录中的ES5之前, 应打开此过程。通过简单地对代码进行修改, 创建新文件, Babel会将代码从一个目录转换到另一个目录:
注意 每次关闭输出窗口(终止过程)或退出NetBeans时, 都需要再次触发该命令。
文章图片
如你所见, npm进程仍在后台运行, 因此你可以进行修改, 并且无论如何都将转储文件。
编码愉快!
推荐阅读
- 遇到“无法停用通用卷”怎样办
- 如何在Dompdf中配置页眉和页脚
- 如何在Dompdf中配置水印
- 如何在Netbeans中添加对Markdown的支持
- 你需要了解的所有响应式Web设计统计信息
- 如何使用命令行创建MySQL数据库并为用户设置权限
- 如何从命令行更改MySQL用户的密码
- 如何使用CLI在Plesk Web Admin中更改域的最大磁盘空间和流量
- 如何在Ubuntu 16.04中重置MySQL 5.7 root密码