es6转es5

一、在没有IDE情况下的转换

在"我的电脑->D盘”新建个文件夹es6，文件夹里新建一个文件es6.js。

打开命令行窗口

1、先全局安装babel-cli,输入命令 npm install babel-cli -g

2、输入 cd d:\es6 ; ---进入文件夹路径

3、输入 npm init；一路回车键 ---（引导你创建一个package.json文件，包括名称、版本、作者这些信息等）

4、输入 npm install --save-dev babel-cli； ---（安装命令行转码babel-cli工具）

5、es6文件里新建配置文件.babelrc

复制代码

{ "presets": [], "plugins": [] }

粘贴到.babelrc 里

6、命令行窗口输入npm install --save-dev babel-preset-es2015；---（安装es2015依赖项）

将"es2015"加入.babelrc

{ "presets": [ "es2015" ], "plugins": [] }

7、输入babel -h 检测是否安装成功

8、将es6编译成es5 例如：babel es6.js -o es5.js

二、WebStorm中es6到es5的自动转换设置

babel及es2015安装同上，即按照上面1-7的步骤执行即可，只是文件夹换成WebStorm项目的文件夹。

下面是WebStorm配置（我的版本2016.2.3）

1、ES6支持配置

打开File-Settings-Languages&Frameworks-JavaScript，界面中的javaScript language version设置为ECMAScript 6

2、File Watchers配置

打开File-Settings-Tools-File Watchers，点击界面右上角的，选择Babel打开如下配置界面，保存即可

3、package.json配置

增加如下配置

{  "scripts": {    "build": "babel src -d lib"  },  "dependencies": {    "babel-cli": "^6.0.0"  }}

时间： 2024-08-03 15:40:27

es6转es5的相关文章

ES6转ES5：Gulp+Babel

目标: ES6代码转成ES5 对转换后的ES5进行压缩以上步骤自动监控执行步骤: 1.安装插件在命令行中定位到项目根目录安装全局 Gulp npm install -g gulp 安装项目中使用的 Gulp npm install --save-dev gulp 安装 Gulp 上 Babel 的插件 npm install --save-dev gulp-babel 安装 Babel 上将 ES6 转换成 ES5 的插件 npm install --save-dev babel-pre

Babel 转码器 § es6转换es5

Babel 转码器 § es6转换es5 实时转码 / Repl -babel-node / babel-register(自动转码引入babel-register模块) 配置文件.babelrc 1.Babel 的配置文件是.babelrc,存放在项目的根目录下.使用 Babel 的第一步,就是配置这个文件. 该文件用来设置转码规则和插件,基本格式如下. { "presets": [], "plugins": [] } 2.presets字段设定转码规则,官方

ECMAScript6转码器，ES6转ES5

现在越来越多的前端开始关注ES6,也有一部分人开始用ECMAScript 6,但是ES6的一些新的特性并不被低版本的浏览器支持. 所以这次就分享一个ES6转ES5的方法. 一.首先建立一个文件夹,然后里面创建.babelrc文件有时候这个文件创建不了的,可以从别处复制过来 .babelrc文件的内容填写如下: {"presets": [],"plugins": []}.babelrc的后期修改需要手动填写. 二.npm init来初始化项目(一路回车就可以有yes

webpack实现es6转es5

Webpack实现es6转换为es5 安装插件 npm install --save-dev babel-loader @babel/core @babel/preset-env 配置在webpack.config.js中的module的rules中,添加一条新的loader { test: /\.js/, //babel转化es6到es5 exclude: /node_modules/, use: { loader: "babel-loader", options: { prese

ES6和ES5中数据结构的遍历

看了ES6就感觉各种数据结构的遍历方法好多好混乱,就写下来总结下,看看应用场景上有什么区别 Array: ES5: (1)Array.prototype.forEach(function(item,index,array){...}) (2)Array.prototype.map(function(value,index,array){...//return value,该值会被插入新数组})映射为一个新数组 (3)Array.prototype.some(function(item){.../

组件封装：es6转es5

1.先全局安装babel-cli,输入命令 npm install babel-cli -g 2.输入 cd d:\es6 ; ---进入文件夹路径 3.输入 npm init: 一路回车键 ---(引导你创建一个package.json文件,包括名称.版本.作者这些信息等) 4.输入 npm install --save-dev babel-cli: ---(安装命令行转码babel-cli工具) 5.es6文件里新建配置文件.babelrc 复制代码 { "presets": []

gulp-babel，es6转es5

npm install --save-dev gulp-babel npm install --save-dev babel-preset-es2015 var gulp = require("gulp"); var babel = require("gulp-babel"); gulp.task("default", function () { return gulp.src("webRoot/src/**/*.js")//

webstorm下ES6转ES5

ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了.Mozilla公司将在这个标准的基础上,推出JavaScript 2.0. ES6的目标,是使得JavaScript语言可以用来编写大型的复杂的应用程序,成为企业级开发语言. 作为一只猴子,我也想尝试一下ES6有什么新特性,于是开始了学习之路. 在webstorm写下了这段代码,体验一下ES6语法的便利,但是一大堆报错各种语法错误 what the fuck 相信每一只程序猴都不想在这样的环境下编码

ES6与ES5差别

1.ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. { var a = 1; let b = 1; } a; b;/ let不像var存在变量提升,即变量一定要声明之后才能使用 2.块级作用域 ES5只有全局作用域和函数作用域,没有块级作用域