使用babel将es6转换成es5简单案例
2017-10-11 15:26
597 查看
前言
以前使用过webpack和babel配合安装,但是不知道babel到底能精简到什么程度就可以实现,今天做了一个案例。为什么我们要用es6呢,好处这里就不说了,自行百度即可。坏处我们就需要带一句,就是因为浏览器的不兼容,这里就需要我们将es6使用babel转换成es5然后在浏览器中运行,即使用了es6,也解决了es6的缺点就是不兼容的问题。
模块安装
首先需要全局安装babel模块npm install -g babel-cli
然后创建一个文件夹,在文件夹里面初始化package.json文件
npm init -y //同npm init -yes
直接按默认生成一个package.json,不用一步一步的点了。
然后在当前目录安装babel所需要的模块
npm install --save-dev babel-preset-es2015 babel-cli
最后创建一个babel的配置文件
.babelrc,(注意,如果直接这样在win上面创建会提示非法文件名,我们创建这个文件的时候需要输入.babelrc.,然后回车就可以创建成功),在
.babelrc文件里面输入
{ "presets":[ "es2015" ], "plugins":[] }
以上的准备工作就完成了。
简单案例
直接在当前文件夹内创建一个es6编写的js文件index.es6.js,内容是
let n = 6; class name { constructor(){ this.name = "lis"; } call(){ console.log(this.name); } } let a = new name(); a.call();
然后使用cmd运行
babel index.es6.js -o index.js
会在当前文件夹内出现一个
index.js文件,打开即可发现文件变成了
"use strict"; var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var n = 6; var name = function () { function name() { _classCallCheck(this, name); this.name = "lis"; } _createClass(name, [{ key: "call", value: function call() { console.log(this.name); } }]); return name; }(); var a = new name(); a.call();
证明我们编译成功
相关文章推荐
- 使用babel进行es6到es5的转换
- WebStorm使用Babel自动转换ES6代码为ES5代码
- 使用Babel将ES6转换为ES5时报错解决方法
- 详解webpack 配合babel 将es6转成es5 超简单实例
- webpack(三)使用 babel-loader 转换 ES6代码
- 使用babel将es6代码转成es5(二)
- 利用babel将es6语法转es5的简单示例
- webpack 配合babel 将es6转成es5 超简单实例
- 使用babel转换 es6-- 其中一坑
- 将javascript的es6的格式转换为es5 Babel
- webpack使用 babel-loader 转换 ES6代码示例
- 使用babel将es6代码转成es5(一)
- babel将es6转换成es5
- JS - WebStrom使用Babel自动编译ES6为ES5
- 简单存储过程和游标使用案例
- 使用自定义标签简单案例
- Java使用MyEclipse构建webService简单案例
- 使用PhoneGap开发简单案例
- [Unity3D]在游戏开发中Notification Center的简单使用与案例说明
- [Unity3D]手机3D游戏开发:使用UnityRemote开发一个简单的FPS案例