使用babel编译es6
起因:开发中慢慢的学习使用es6,但是JavaScript需要浏览器来解析,而不是所有浏览器都支持es6,所以为了兼容es6,需要第三方工具进行编译es6。
工具:node,gulp,gulp-babel,babel-preset-es2015。
备注:只介绍基于node,gulp下的babel编译es6。node安装请自行网搜。npm转淘宝镜像cnpm请自行网搜。
开始:创建项目文件夹;打开命令行工具:右键开始菜单--运行--输入cmd--回车。
1:检验node是否安装成功:输入 (有显示版本号就表示安装成功)
1 npm -v 2 node -v
1-1:检验淘宝镜像是否安装成功:输入(有显示版本号就表示安装成功)(若安装了淘宝镜像之后的 npm 命令请替换为 cnpm)
1 cnpm -v
2:安装npm工具包 gulp,gulp-babel,babel-preset-es2015 输入
1 npm gulp gulp-babel babel-preset-es2015 --save-dev
3:配置编译环境
3-1:配置babel编译需要的内容
在项目文件夹中新建文件,名称 .babelrc (windows下是无法直接创建点开头的文件的,通过编辑器或者IDE来创建就可以了)。
在 .babelrc 写入以下内容
1 { 2 "presets": [ 3 "es2015" 4 ] 5 }
3-2:配置gulp运行需要的内容
在项目文件夹中新建文件,名称 gulpfile.js
在 gulpfile.js 写入以下内容
1 //引入gulp,gulp-babel的npm模块; 2 var gulp = require('gulp'); 3 var babel = require('gulp-babel'); 4 5 //创建gulp运行代码 6 gulp.task('babel', function () { //‘babel’ gulp的脚本名称,自定义命名 7 return gulp.src(‘dev.js’) //js入口文件,可用绝对路径、相对路径,是文件类型 8 .pipe(babel()) //运行gulp-babel进行编译 9 .pipe(gulp.dest(‘src’)) //编译后的文件输出地址,是文件夹类型 10 });
3-3:执行gulp进行编译,命令行工具进入到项目目录,输入
1 gulp babel //babel就是要执行gulp的脚本名称,命名成什么就改成相应的
3-4:输入完成后回车就可以了。到输出目录去查看js文件吧。
转载于:https://www.cnblogs.com/ygjoe/p/6909889.html
使用babel编译es6相关推荐
- nodejs下babel编译es6后异常定位助手:source-map-support
为什么80%的码农都做不了架构师?>>> 使用es6甚至es7写代码是愉快的,然而由于兼容性原因,我们不得不使用babel把es6代码转成es5的,但这样会有一个问题,那就是出 ...
- 前端学习笔记之 ES6之Module模块与Babel编译(十三)
文章目录 Module 初识Module Module的基本用法 Module的导入和导出 export default export Module的注意事项 Module的应用 总结 Babel和W ...
- vue 2.0 无法编译ES6语法
# vue2.0 webpack 无法编译 ES6 语法 之前在使用 vue 1.x 时用 vue-loader@8.0.0 版本可以正常打包vue的代码,包括ES6语法也能正常转为ES5语法,但是当 ...
- gulp中使用babel-polyfill编译es6拓展语法
今天想在新项目中使用es6的generators,发现虽然gulp已经有了babel编译,但仍会报错,网上查找后发现解决办法是加载polyfill,但是找到的办法都不试用我的项目. 解决办法:在ind ...
- babel 编译vue_如何对代码进行未来验证:使用Babel polyfills编译JavaScript VS
babel 编译vue A compiler like Babel will almost certainly be a foundational tool in building JavaScrip ...
- 【简单入门】使用Babel进行es6转es5
初始状态: 下面我们开始将这行es6代码转为es5 如果不出什么意外的话按以下步骤执行即可,如果有问题详细看教程2 教程1 步骤1:初始化npm (注意:命令行都是在项目所在目录temp下执行) np ...
- html中babel编译vue,vue-cli中的babel配置文件.babelrc实例详解
本文介绍vue-cli脚手架工具根目录的babelrc配置文件 介绍 es6特性浏览器还没有全部支持,但是使用es6是大势所趋,所以babel应运而生,用来将es6代码转换成浏览器能够识别的代码 ba ...
- babel编译html文件,babel 和 browserify 编译
如何使用es6模块化? 使用起来其实非常简单 在 module1.js 中 var hello = 'hello world !'; function sayHello(){ console.log( ...
- 从babel实现es6类的继承来深入理解js的原型及继承
先聊个5毛钱的背景吧 自从有了babel这一个利器之后,es6现在已经被广泛的使用.JavaScript 类实质上是 JavaScript 现有的基于原型的继承的语法糖.类语法不会为JavaScrip ...
最新文章
- WSUS3.0的部署及安装
- 实验吧--web--天下武功唯快不破
- 解决javascript动态改变img的src属性图片不显示问题
- 一款IDEA插件神器,帮你一键转换DTO、VO、BO、PO、DO
- python实现redis三种cas事务操作
- K-Means 基本原理
- QT的QScriptContext类的使用
- asp.net甘特图控件exG2antt介绍及免费下载
- Intel:Larrabee浮点运算能力2TFlops
- thymeleaf引用html_SpringBoot+Thymeleaf实现html文件引入(类似include功能)_html/css_WEB-ITnose...
- 常见的Java编程思想有哪些
- Python爬取百度文库doc文档
- SLM4054独立线性锂电池充电器的芯片的学习
- 软件测试的常用的面试题【带答案】
- 金山打字通 右手练习
- html透明玻璃效果,ps制作逼真的透明玻璃特效效果
- 端游服务器文件转成手游,苦等三年,当年画面最好的端游终于要做成手游了!...
- 二十九幅图片所展现的意境:壮美!
- 第一节:(3)逻辑芯片工艺衬底选择
- mysql 联表查询 简书_mysql多表查询
热门文章
- StringTokenizer(字符串标记)
- html行间距1.8em,雅黑字体下WordPress 行高与字符间距最佳实践:1.8em与0.06em
- c语言用法 我说火罐火车 刘华火车,五塘村社区建“火车头广场”
- python写完程序保存_Python学习笔记——文件处理
- sylog mysql_syslog-ng+loganalyzer搭建日志集中监控平台
- mysql sleep详解_mysql sleep链接过多的原因及解决办法
- python列表输入不加逗号_用python打印不带括号或逗号的列表
- python数据挖掘主要特点_【Python数据挖掘】第六篇--特征工程
- 1、计算机图形学——2D变换与齐次坐标
- C++知识点18——使用C++标准库(vector的增长与迭代器失效)