【02】webstorm配置babel转换器+截图(by魔芋)整体目录地址

 
【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 FileNameWithoutExtensionFileNameWithoutExtension-compiled.js FilePathFilePath
(魔芋解释:这里的FileNameWithoutExtensionFileNameWithoutExtension就是我们的JS文件名。
比如a.js 就变为a-compiled.js
 
FilePahFilePah 就是输出到同目录下。
在文件夹的顺序如下图:

 
在webstorm中的效果如:

 
 
)
 
 
 
 

babel配置的更多相关文章

  1. babel 配置探究及错误解析

    前面的文章说到了react 15的一些特性,众所周知react搭配es6或者叫es2015的开发模式更加的方便快捷.不过提到es2015这个毕竟没有被浏览器广泛支持的规范,要想能够快快乐乐的应用起来, ...

  2. webpack中babel配置 --- runtime-transform和babel-pollfill

    webpack - babel配置 babel是一个javascript编译器,是前端开发中的一个利器.它突破了浏览器实现es标准的限制,使我们在开发中可以使用最新的javascript语法. 通过构 ...

  3. webpack4.0 babel配置遇到的问题

    babel配置 babel版本升级到8.x之后发现出现了很多问题.首先需要安装 "@babel/core": "^7.1.2", "@babel/pl ...

  4. Vue学习之Babel配置(十六)

    一.Babel:  (官网:https://www.babeljs.cn/docs/) 1.Babel 是一个 JavaScript 编译器: 2.Babel 是一个工具链,主要用于将 ECMAScr ...

  5. Babel 配置用法解析

    Babel 配置用法解析 刚复工的时候我司业务太多了,我已不记得我们连续作战了多少天,最近算是有时间可以学习学习我的babel大宝贝了,上周末看了下babel的一些核心模块以及babel的一些配置,今 ...

  6. webpack 3.X学习之Babel配置

    Babel是什么 Babel是一个编译JavaScript的平台,它的强大之处表现在可以通过编译帮你达到: 使用下一代的javascript(ES6,ES7,--)代码,即使当前浏览器没有完成支持: ...

  7. babel配置项目目录支持转换es6语法,引入非项目目录js后,引入Js转换无效

    我遇到了一个问题,我在已经配置babel的项目中通过require引入了一个项目目录外层的另一个js文件,前期是可以成功转换并打包的,但是到了后期就不行了,报错: 这个报错的意思是,引入的js文件中有 ...

  8. 自定义配置Webpack和Babel配置

    在使用ant-design-vue的包时样式是可以生效的但是如果我需要用到less文件时会报一个异常 当然这个异常其实很清晰的说明了什么问题看错误信息里面有issues地址,看来问题不止我们遇见了可以 ...

  9. 基于webpack实现多html页面开发框架五 开发环境配置 babel配置

    一.解决什么问题      1.开发环境js.css不压缩,可在浏览器选中代码调试      2.开发环境运行http服务指向打包后的文件夹      3.babel输出浏览器兼容的js代码 二.需要 ...

随机推荐

  1. OC 结构体

    void test() { // 这个机构只能在函数内部使用 // 定义一个名为Student的结构体类型 struct Student { int age; // 年龄 char *name; // ...

  2. IOS 公司标示使用反向域名

    1. 公司标示使用反向域名========================================正向域名 www.baidu.com 用来标示一台网络主机反向域名 cn.itcast.Myd ...

  3. Bootstrap Table的使用小结

    1.Jquery中的一些东西学习一下子,补充完善一下,毕竟有些时候没有使用到 这个方式很有用,在使用bootstrap table的时候,选择当前已经选择的节点的事件中的ID的值 当前rows中有很多 ...

  4. maven 项目运行找不到类

    其实maven 仓库有jar包,可能未编译或破损, 在本地仓删除它,然后maven install

  5. C# 打开文件或打开文件夹

    直接打开指定的文件 System.Diagnostics.Process.Start(v_OpenFilePath); 直接打开目录 string v_OpenFolderPath = @" ...

  6. Tomcat 服务器体系结构

    connector 监听端口,监听到以后,交给 Engine 引擎 处理,引擎会根据请求找到对应的主机,找到主机后再去找对应的应用. 如果我们将 port 改为 80,那访问的时候就不用输入端口号,因 ...

  7. 优雅的QSignleton (五) 优雅地进行GameObject命名

      这段时间空调吹感冒了,休息了好久 ​ 本篇介绍QSingleton最重要的功能,是它让QSingleton称得上优雅.相关内容之前介绍过. 代码如下: MonoSingletonPath.cs n ...

  8. Java实现双向冒泡排序

    public class BubbleSort_Two { public static void bubbleSort_Two(int[] list){ //j在最外层定义 boolean needN ...

  9. C#中rpt的数据类型和Oracle中数据类型的匹配

    Oracle中number数据类型对应C#中decimal数据类型,结果是整数 Oracle中number数据类型对应C#中int32数据类型,结果是小数,保留两位小数 Oracle中中date类型数 ...

  10. Python基础—13-面向对象及异常处理

    面向对象及异常处理 内置函数 总结:__init__.__del__.__str__.attr系列.item系列.__call__ __str__与__repr__ 使用print/str方法时会自动 ...