【02】webstorm配置babel转换器+截图(by魔芋)
 
【02】魔芋的安装过程
 
 
01,配置babel。
 
02,用webstorm。注意webstorm的版本号。
 
03,使用webStorm自带的file watcher中的babel自动编译。需要安装一些babel库。
 
 
04,全局安装bable-cli。(实际上新的babel已经集成在babel-cli里面了。)
 
 
npm install -g babel-cli
npm install--save-dev  babel-preset-env
 
安装了babel-preset-env就不用安装babel-preset-es2015了。

env这个包,会根据es6的运行环境去编译js,而无序指定哪个具体的es版本。

 
 
05,或项目安装babel-cli(要在filewatcher的babel设置里,要在program里选择项目里的babel地址。)
 
npm install babel-cli --save-dev
 
 
 
 
06,在项目根目录安装package.json.
用npm init 然后一路回车即可。
 
07,.babelrc 文件无法在电脑文件夹直接创建,会报错,说文件缺少文件名,但是可以在webstorm里创建。
 

在项目根目录下,也就是package.json同目录下,创建.babelrc文件。【该文件非必须】

不再使用:{"presets":["es2015"]} 了。

.babelrc文件:(官网配置)
{
"presets": [
"env"
]
}
 
 
 

 
 
 
08,webstorm开启es6

file - setting - languages & frameworks - Javascript

09,
File Watcher 中babel设置

webstorm 里的路径: file - setting - tools - File Watcher,

从图中右侧的+号里打开新窗口,选中babel,在图中间就会出现Babel了。

 
begin:魔芋:貌似全局安装了babel后,babel的配置就自动设置好了。
 

 
 

双击上图的Babel,会进入babel设置界面。

 

在这个界面里,需要设置的地方有三个,Program,Arguments,  Output paths to refresh

 

魔芋:我的配置参数为:(成功版)(也是webstrom最最原始的参数)
Program:
C:\Users\Miki\AppData\Roaming\npm\babel.cmd 
(如果是全局安装babel-cli的,这里默认就好了。)
(如果是项目安装的,就要右边的...到项目的node_modules文件夹中,找到.bin文件夹下面的babel文件,点ok就可以了。)
 
 
Arguments:
--source-maps --out-file $FileNameWithoutExtension$-compiled.js $FilePath$
(魔芋解释:这里的$FileNameWithoutExtension$就是我们的JS文件名。
比如a.js 就变为a-compiled.js
 
$FilePah$ 就是输出到同目录下。
在文件夹的顺序如下图:

 
在webstorm中的效果如:

 
 
)
 
Working directory:
$FileDir$
 
Output paths to refresh:
$FileNameWithoutExtension$-compiled.js:$FileNameWithoutExtension$-compiled.js.map
 
 

 
实际效果如图:
a.js 
let [a,b,c]=[1,2,3];

let [e]=[1,2,3];
 
a-compiled.js
"use strict";

var a = 1,
b = 2,
c = 3;
var _ref = [1, 2, 3],
e = _ref[0]; //# sourceMappingURL=a-compiled.js.map
 
 
 
 
 
 
 
 
 

**

【02】webstorm配置babel转换器+截图(by魔芋)的更多相关文章

  1. webstorm配置babel自动转译es6的方法

    1.npm安装babel npm install -g babel-cli 2.npm安装Babel的preset npm install --save-dev babel-preset-es2015 ...

  2. WebStorm配置node.js调试

    最近因为工作关系,一直在做node.js的开发,学习了koa框架,orm框架sequelize,以及swagger文档的配置.但是,最近因为swagger文档使用了es6的修饰器那么个东西(在java ...

  3. WebStorm配置

    一.主题配色 主题设置方法:File -> Settings -> Appearance & Behavior -> Appearance ->Theme. webst ...

  4. Webstorm配置CSS/SCSS自动补全兼容前缀autoprefixer插件

    关于Autoprefixer Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器.它适用于普通的CSS,可以实现css3代码自动补全.也可以轻松跟Sass,LESS及 ...

  5. webstorm配置编译sass的输出目录

    关于这个的问题,虽说不是很难,但还是踩了点小坑,下面就来介绍下如何使用webstorm配置编译sass的输出目录. 1.下载Ruby 2.使用Ruby安装sass 3.检测是否安装成功. 前面的几步很 ...

  6. webstorm配置eslint【标记错误,修复错误】

    项目中经常用到eslint语法,结合个人经验,用webstorm配置eslint "文件"->"默认设置"->"语言&框架&quo ...

  7. springboot上传文件 & 不配置虚拟路径访问服务器图片 & springboot配置日期的格式化方式 & Springboot配置日期转换器

    1.    Springboot上传文件 springboot的文件上传不用配置拦截器,其上传方法与SpringMVC一样 @RequestMapping("/uploadPicture&q ...

  8. 配置babel

    配置babel ECMAScript的版本,每年都会定期举行会议,发布各种标准,当前版本到了2019,但大部分人使用的浏览器,都可以支持es2015,也就是es6,要等到大部分浏览器都支持到最新版本, ...

  9. ruby安装及webStorm配置SCSS

    sass安装: 步骤:(window系统) 1.下载RubyInstaller(v2.4.3),运行安装,基本直接next安装,不过有个add to PATH的选项一定要勾选,这样就不用配置环境变量. ...

随机推荐

  1. Java问题定位之如何借助线程堆栈进行问题分析

    在大型的应用中,线程堆栈打印出来特别多,如何从众多的信息中找到真正有用,有价值的信息,我们需要一定的技巧.本文对此详细介绍. 我们可以从三个方面分析:堆栈的局部信息,一次堆栈的统计信息,多个堆栈的对比 ...

  2. ES7的Async/Await的简单理解

    Async/Await 的个人见解 正文: async,顾名思义,一个异步执行的功能,而 await 则是配合 async 使用的另一个关键字,也是闻字识其意,就是叫你等待啦! 二者配合食用效果更佳哦 ...

  3. 前端怎样学习react

    这是一个很长的话题.....慢慢写

  4. C语言头文件怎么写?(转载)

    ---恢复内容开始--- c语言头文件怎么写?我一直有这样的疑问,但是也一直没去问问到底咋回事:所以今天一定要把它弄明白! 其实学会写头文件之后可以为我们省去不少事情,可以避免书写大量的重复代码,还在 ...

  5. Gym 100090M Jumping along the Hummocks

    题意: 从 前往后跳,要么跳一步,跳到相邻的位置,要么跳到下一个数字相同的位置,求跳到最后的最少步数. dp,但是会tle,我用map优化了一下. #include <bits/stdc++.h ...

  6. 【转】WebSocket 是什么原理?为什么可以实现持久连接?

    WebSocket是HTML5出的东西 也就是说HTTP协议没有变化 但HTTP是不支持持久连接的(长连接,循环连接的不算)或者说WebSocket干脆就不是基于HTTP来执行的.但是...说不通啊. ...

  7. asp .net core 中间件的简单 使用

    在startup 的cs文件中 2.捕获异常的中间件 可以在浏览器中 显示异常信息 在开发环境的境况下,该中间件会帮你 捕获异常

  8. python main

    python中的main函数,总体来说就是,main比较适合写test测试,有点类似于java中的testcase,就是程序单独运行时是运行main的,但是当被调用时就不会运行main了.具体可以参考 ...

  9. HTML第一章:初始HTML

    设置ws字体大小:左上角file-->Settings--->在搜索框中输入font 网页的第一行一定是<!DOCTYPE html>:网页声明,代表这个页面是h5页面html ...

  10. mysql存储问题

    为什么标题要起这个名字呢?commen sence指的是那些大家都应该知道的事情,但往往大家又会会略这些东西,或者对这些东西一知半解,今天我总结下自己在mysql中遇到的一些commen sense类 ...