利用babel将es6语法转es5的简单示例

前言

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。

这意味着，你可以现在就用ES6编写程序，而不用担心现有环境是否支持。

本文讲解需预装node和npm。大家可以参考这篇文章：http://www.jb51.net/article/90518.htm，这里介绍的非常详细。

文件目录结构

生成包管理配置文件package.json

npm init -y

安装转换工具

npm i -g babel-cli

npm i --save-dev babel-preset-es2015 babel-cli

在.babelrc文件中写入如下内容

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

编译文件

babel src/test.js -o dist/test.js

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • 详解webpack 配合babel 将es6转成es5 超简单实例

    今天接触了webpack,第一次使用webpack进行转码,竟然稀里糊涂就成功了,哈哈. 下面附上流程 创建个文件夹,初始化一下,首先全局安装webpack npm install webpack --save-dev 然后安装babel npm install --save-dev babel-core babel-preset-es2015 npm install --save-dev babel-loader 在当前文件夹内执行安装,然后创建两个文件夹一个src作为源文件夹,一个bin,保

  • 利用babel将es6语法转es5的简单示例

    利用babel将es6语法转es5的简单示例

    前言 Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行. 这意味着,你可以现在就用ES6编写程序,而不用担心现有环境是否支持. 本文讲解需预装node和npm.大家可以参考这篇文章:http://www.jb51.net/article/90518.htm,这里介绍的非常详细. 文件目录结构 生成包管理配置文件package.json npm init -y 安装转换工具 npm i -g babel-cli npm i --save-dev babel-pr

  • 详解设置Webstorm 利用babel将ES6自动转码成ES5

    详解设置Webstorm 利用babel将ES6自动转码成ES5

    前言:ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了.Mozilla公司将在这个标准的基础上,推出JavaScript 2.0.ES6的目标,是使得JavaScript语言可以用来编写大型的复杂的应用程序,成为企业级开发语言.但是现代浏览器对ES6新特性支持度不高,所以要想在浏览器中直接使用ES6的新特性就得借助别的工具来实现. 今天我就来分享一下,如何配置Webstorm 利用babel将ES6自动转码成ES5.Babel是一个广泛使用的转码器,

  • Vue2.0 ES6语法降级ES5的操作

    由于部分低版本的手机还不支持ES6语法,将会导致vue报错.综合了网上的各种办法,我的项目现在终于成功降级ES5. 首先安装插件 npm install -D babel-preset-es2015 babel-core babel-preset-stage-2 babel-loader 编辑配置文件 编辑/build/webpack.base.conf.js 编辑entry节点,变成如下 entry: { app: ['babel-polyfill', './src/main.js'] } 替

  • Webpack4 使用Babel处理ES6语法的方法示例

    修改 index.js 内容,写一些 ES6 的语法: const arr = [ new Promise(() => {}), new Promise(() => {}) ]; arr.map(item => { console.log(item); }) ES6 很强大,但目前并不是所有的浏览器都支持,所以需要用到 Babel,让旧的浏览器或环境中将 ES6 代码转换为向后兼容版本的 JavaScript 代码. 来试一下吧,先安装需要用的 Babel 包: npm install

  • 详解如何用babel转换es6的class语法

    babel是一个转码器,目前开发react.vue项目都要使用到它.它可以把es6+的语法转换为es5,也可以转换JSX等语法. 我们在项目中都是通过配置插件和预设(多个插件的集合)来转换特定代码,例如env.stage-0等. 实际上babel可以通过自定义插件的方式实现任何代码的转换,接下来我们通过一个"把es6的 class 转换为es5"的例子来了解一下babel. 内容如下: webpack环境配置 大家应该都配置过babel-core这个loader,它的作用是提供babe

  • 详解ES6语法之可迭代协议和迭代器协议

    ECMAScript 2015的几个补充,并不是新的内置或语法,而是协议.这些协议可以被任何遵循某些约定的对象来实现. 有两个协议:可迭代协议和迭代器协议. 可迭代协议 可迭代协议允许 JavaScript 对象去定义或定制它们的迭代行为, 例如(定义)在一个 for..of 结构中什么值可以被循环(得到).一些内置类型都是内置的可迭代对象并且有默认的迭代行为, 比如 Array or Map, 另一些类型则不是 (比如Object) . Iterator 接口的目的,就是为所有数据结构,提供了

  • Node中使用ES6语法的基础教程

    相关背景介绍 我们现在大多数人用的语法javascript 其实版本是ecmscript5,也是就es5.这个版本己经很多年了,且完美被各大浏览器所支持.所以很多学js的朋友可以一直分不清楚es5和javscript的关系.javascript是一门编程语言,那么它就会有版本,es5还是es6 就就是它的版本号.最新版es7己经在紧锣密布的进行中,它最新的语法会让我们写代码更新的行云流水. 引言 Node本身已经支持部分ES6语法,但是import export,以及async await(No

  • ES6扩展运算符的使用方法示例

    目录 什么是spread 和rest运算符 数组的扩展运算符 rest运算符(收集作用) spread运算符(展开作用) 对象的扩张运算符 浅克隆 深克隆 总结 什么是spread 和rest运算符 spread和rest运算符在ES6中,都用(...)表示,其中spread为扩展(展开)运算符,rest为剩余(收集)运算符.在不同的地方使用此运算符有不同的作用,可以从读和写两个角度考虑.其中写操作有收集作用,读操作有展开作用.在ES6中,(...)运算符只对数组有效,ES7中添加了对对象的扩展

  • WebStorm ES6 语法支持设置&babel使用及自动编译(详解)

    WebStorm ES6 语法支持设置&babel使用及自动编译(详解)

    一.语法支持设置 Preferences > Languages & Frameworks > JavaScript 二.Babel安装 1.全局安装 npm install -g babel-cli 2.当前项目,适用于使用不同babel版本的情况 npm install --save-dev babel-cli 三.Babel基本用法 # 转码结果输出到标准输出 babel example.js # 转码结果写入一个文件 # --out-file 或 -o 参数指定输出文件 bab

随机推荐