专栏首页无道编程Webstorm配置babel将.js文件转换为es5

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

前言

最近编写工具站(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

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

安装babel-preset-env

npm install babel-preset-env --save

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

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

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

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

在命令行里面使用

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

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

输入

babel -h

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

我准备了

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

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

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

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

没报错,就成功啦~

查看reg.js文件:

的确是es5语法了。

webstorm配置

新建Babel

如下图

填写内容:

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语法:

1、

2、

3、

变成es5语法了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • (2019)[前端]面试题[7]:CSS中权重计算方式方法

    无道
  • 【学习笔记】ES6新的语法

    无道
  • 解决生成ssh密匙后还需要输入密码

    参考文章:https://blog.csdn.net/shahuhu000/article/details/86625987

    无道
  • Javascript也可以玩机器学习

    前端工程师们~js也可以用来玩机器学习的。 今天看到这些相关的资源,分享给大家~~ 数据可视化这块应该都算比较熟悉的了,建议从通用机器学习库开始学习。 既然有这...

    mixlab
  • Kotlin实战之仿【One·一个】

    最近刚开始学习使用Kotlin,被Kotlin的简洁深深吸引,但是纸上得来终觉浅,学习一门编程语言的最好途径始终是动手coding,但是做个什么好呢?秉着简单实...

    开发的猫
  • PhalApi-SMS基于PhalApi容联云短信服务器拓展

    #PhalApi-SMS基于PhalApi容联云短信服务器拓展 ? ##前言 在做项目时更换短信运营商时,找到了容联云通讯(滴滴用的是他的服务),感觉很不错看了...

    喵了个咪233
  • springboot学习教程【面试+工作】

    奋斗蒙
  • Spring Data JPA WITH Kotlin

    异常消息: No default constructor for entity: : com.ak47.cms.cms.entity.StockIndex; n...

    一个会写诗的程序员
  • org.hibernate.QueryException: could not instantiate class [com.ak47.cms.cms.dto.TechArticleDto] f...

    检查一下 DTO 的成员变量, 构造对象的时候, 入参有一个值是null 导致转换异常

    一个会写诗的程序员
  • Qt 用画笔对图片实现马赛克效果

    最近接了一个用 Qt 做跨平台截图工具的任务,主要功能有截图、绘制图案、马赛克、毛玻璃、文字能效果,其中马赛克功能时参考网上的文献并自己研究制作出来的,这里特意...

    我与梦想有个约会

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动