详解设置Webstorm 利用babel将ES6自动转码成ES5
前言：ECMAScript 6是JavaScript语言的下一代标准，已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上，推出JavaScript 2.0。ES6的目标，是使得JavaScript语言可以用来编写大型的复杂的应用程序，成为企业级开发语言。但是现代浏览器对ES6新特性支持度不高，所以要想在浏览器中直接使用ES6的新特性就得借助别的工具来实现。
今天我就来分享一下，如何配置Webstorm 利用babel将ES6自动转码成ES5。Babel是一个广泛使用的转码器，babel可以将ES6代码完美地转换为ES5代码，所以我们不用等到浏览器的支持就可以在项目中使用ES6的特性。
1.在Webstorm 里新建一个空项目，取名为es6demo.
2..然后在根目录下面新建一个package.json,只需要写明两个属性即name和version。
3.打开webstorm的终端(Terminal)，快捷键为Alt+F12,安装babel-cli。也可全局安装。
或者这样打开：
安装babel-cli： npm install --save-dev babel-cli
4.安装完babel-cli后，可以看到新生成了一个node_modules文件和一个package-lock.json文件，同时发现package.json文件中多出了
"devDependencies": {
"babel-cli": "^6.26.0"
}
这样一行代码，此代码说明babel-cli已安装成功，形成了依赖。
5.然后再Settings->Languages & Frameworks中选择Javascript选项，同时将version版本选择为ECMAScript6即可。
6.再在webstorm的终端(Terminal)，安装Babel的preset以正确识别ES6代码，命令如下：
npm install --save-dev babel-preset-es2015
安装完后同时在package.json文件中会多出
"babel-preset-es2015": "^6.24.1" 这样一行代码，说明babel-preset-es2015也成功安装上了。
7.在根目录下面新建一个名为.babelrc文件，内容如下：
{
"presets": [
"es2015"
]
}
8.设置File Watcher. File--settings--Tools--File Watcher。
9.创建一个名为test.js，在里面写es6的语法，不再报错。test-compiled.js就是编译成es5的文件，默认是严格模式。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍详解webpack 配合babel 将es6转成es5 超简单实例，包括了详解webpack 配合babel 将es6转成es5 超简单实例的使用技巧和注意事项，需要的朋友参考一下 今天接触了webpack，第一次使用webpack进行转码，竟然稀里糊涂就成功了，哈哈。 下面附上流程 创建个文件夹，初始化一下，首先全局安装webpack 然后安装babel 在当前文件夹内执行安装，然
-
本文向大家介绍详解用Webpack与Babel配置ES6开发环境，包括了详解用Webpack与Babel配置ES6开发环境的使用技巧和注意事项，需要的朋友参考一下 安装 Webpack 安装： 在项目根目录下新建一个配置文件—— webpack.config.js 文件： 在 src 目录下新建 a.js 文件： 在 src 目录下新建 index.js 文件： 执行编译打包命令，完成后打开 bu
-
本文向大家介绍webpack使用 babel-loader 转换 ES6代码示例，包括了webpack使用 babel-loader 转换 ES6代码示例的使用技巧和注意事项，需要的朋友参考一下 本文介绍了webpack使用 babel-loader 转换 ES6代码示例，分享给大家，具体如下： 查询各个 loader的使用，可以在官网上查询。https://www.npmjs.com （一）安装
-
本文向大家介绍mybatis自动生成时如何设置不生成Example类详解，包括了mybatis自动生成时如何设置不生成Example类详解的使用技巧和注意事项，需要的朋友参考一下 本文主要给大家介绍了关于mybatis自动生成时不生成Example类的相关内容，分享出来供大家参考学习，下面来看看详细的介绍： 只需要在配置要生成的table表中添加几个配置属性就行了。 在generatorConfi
-
本文向大家介绍利用ES6语法重构React组件详解，包括了利用ES6语法重构React组件详解的使用技巧和注意事项，需要的朋友参考一下 一、创建组件 ES6 class创建的组件语法更加简明，也更符合javascript。内部的方法不需要使用function关键字。 React.createClass React.Component(ES6) 二、属性 props propTypes and ge
-
本文向大家介绍vscode配置vue下的es6规范自动格式化详解，包括了vscode配置vue下的es6规范自动格式化详解的使用技巧和注意事项，需要的朋友参考一下 前言 最近在写Vue的时候，遇见了js es6格式化问题，因为我平时用vscode在写php，所以会安装一些格式化插件，也包括html-css-js的插件 导致的问题：由于vue语法规范问题，导致保存自动格式化成不被使用的代码格式，出现