Webstorm配置babel将.js文件转换为es5

无道 2019-07-26 0 条评论 教程相关 阅读544 手机阅读

前言

最近编写工具站(Laravel + Vue.js【是引用.js文件,不是前端vue.js后端laravel】)的时候,写js的时候,是在不想写es5语法,比如写var,Webstorm提醒使用let或者const,本人是强迫症,不想有个波浪线提示。

并且某些低版本浏览器对es6兼容性不太好,所以这里还有个兼容性问题。而node.js中可以使用babel将es6语法转换为es5语法。所以我就想能不能利用babel,将单个.js文件的语法转换为es5?经过一番实践,成功了。

下面是步骤

步骤

安装babel-cli

npm install -g babel-cli

安装全局babel-cli

注意:需要加g全局安装。

安装babel-preset-env

npm install babel-preset-env --save

Babel已经弃用了babel-preset-es2015,现在最新启用的是babel-preset-env

安装babel-preset-env

这个可以在项目中安装babel-preset-env,亦可以在用户家目录安装。

windows家目录是:C:\Users\99141 【99141是我的用户名,你们需要是自己的】

我这里是选择在家目录安装babel-preset-env,因为我想在任何项目里面都能使用该东西。

在命令行里面使用

因为webstorm中的External Tools工具,本质也就是调用命令行而已。

所以我先尝试在命令行里面使用看看能不能成功。

输入

babel -h

查看帮助,没报错误,就是成功啦。

babel -h

我准备了

一个regular.js文件,里面有es6语法。

regular.js

好了,在命令行里面输入:

 babel regular.js --presets env --out-file reg.js

编译regular.js 到文件reg.js , 用的预设规则是env 【前面安装的,如果该项目文件夹里面(node_modules)没有安装 babel-preset-env并且家目录也没有安装的话,此处运行是会报错的。

babel编译js文件

没报错,就成功啦~

查看reg.js文件:

reg.js

的确是es5语法了。

webstorm配置

新建Babel

新建babel

如下图

新建babel tools

填写内容:

Name: Babel

名称随意即可

description: transform es6 to es5

描述随意即可

Program: F:\nodejs\node_global\babel.cmd

之前安装的babel-cli 文件的位置,我这里是设置到了F盘,默认应该是C盘。

设置请看:https://www.misiyu.cn/article/15.html

这里不影响,去C盘找就行。直接搜索babel.cmd也可。

Parameters: --presets env $FileDir$/$FileName$ --out-file $FileName$

参数,默认以上即可

Working directory:$ProjectFileDir$

工作目录,默认以上即可。

使用

先看看,同样的es6语法:

截图-1564104545

1、

截图-1564104579

2、

截图-1564104597

3、

截图-1564104618

变成es5语法了。

全文完 [
有帮助?打赏
支付宝打赏
微信打赏
]
标签: webstorm babel es6 es5
修改: 2019-07-26 09:31
这篇文章还没有评论呢~
点击刷新/生成验证码