babel的使用及安装配置教程
简介
babel是一个广泛使用的转码器,可以将ES6代码转化为ES5代码,从而在现有环境执行,这意味着,你可以现在就用ES6编写程序,而不用担心现有环境是否支持。
安装及配置
npm install babel-cli --save-dev
或者 cnpm install babel-cli --save-dev
使用淘宝镜像安装会更快。
步骤:进入项目 ==>cnpm install babel-cli --save-dev
为什么不安装在全局
如果安装在全局,那意味着项目要运行,全局环境必须有bable,也就是说项目产生了对环境的依赖。另一方面,这样做也无法支持不同项目使用不同版本的babel。
设定转码规则
根目录下安装:cnpm install babel-preset-es2015 --save-dev
安装完成之后,再创建配置文件 .babelrc这个文件,得放在项目根目录下,它的基本格式是:
{ "presets":[], "plugins":[] }
presets字段设置的就是转码规则,plugins是设置的babel的插件。然后配置文件:
{ "presets":["es2015"] }
到这里,关于babel的基本配置就完成了。
实例演示:
在项目根目录下创建demo.js
let a = 5; const b = 10; let input = [1,2,3]; input.map(item => item+1);
因为我们现在是将babel安装到了当前目录下,所以不能直接在终端中babel转换命令,得使用npm来运行,所以先在packge.json中编写
{ "devDependencies": { "babel-cli": "^6.26.0", "babel-preset-es2015": "^6.24.1" }, "scripts":{ "build":"babel demo.js" } }
进入根目录,npm run build
运行,查看结果
也可以输出到指定的目录
{ "devDependencies": { "babel-cli": "^6.26.0", "babel-preset-es2015": "^6.24.1" }, "scripts":{ "build":"babel demo.js --out-file bunder.js" } }
进入根目录,npm run build
运行,查看结果
这次会在根目录下找到被编译过的bunder.js文件
文件夹截图
总结
以上所述是小编给大家介绍的babel的使用及安装配置教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
您可能感兴趣的文章:
- WebStorm ES6 语法支持设置&babel使用及自动编译(详解)
- webpack使用 babel-loader 转换 ES6代码示例
- 让nodeJS支持ES6的词法----babel的安装和使用方法
- babel基本使用详解
- ES6通过babel转码使用webpack使用import关键字
相关推荐
-
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
-
babel基本使用详解
什么是babel? babel是一个强大的多用途js编译器 点击进入官网 安装babel npm install -g babel-cli npm install --save-dev babel-cli babel配置文件 通过.babelrc来表示 { "presets" : [ ], "plugins" : [ ] } presets用来存放一些预设 plugins用来存放一些插件 命令行的简单使用 我们可以通过 -o (--out-file) 参数来编译一个
-
让nodeJS支持ES6的词法----babel的安装和使用方法
要使用Babel, 我们需要nodeJS的环境和npm, 主要安装了nodeJS, npm就默认安装了 , 现在安装nodeJS很简单了, 直接下载安装就好了: 安装es-checker 在使用Babel之前 , 我们要先检测一下当前node对es6的支持情况, 我们使用先es-checker, 命令行下执行: 运行下面代码 npm -g install es-checker es-checker安装完毕以后, 命令行执行:es-checker , 如下图, 我的node环境版本是v4.4.3,
-
webpack使用 babel-loader 转换 ES6代码示例
本文介绍了webpack使用 babel-loader 转换 ES6代码示例,分享给大家,具体如下: 查询各个 loader的使用,可以在官网上查询.https://www.npmjs.com (一)安装 babel-loader,babel-core. 使用命令 npm install --save-dev babel-loader babel-core 因为ES6语法每年都在更新,因此,我们需要一定的规则去转换. npm install --save-dev babel-preset-lat
-
ES6通过babel转码使用webpack使用import关键字
使用了babel转码,使用import和export的时候,在浏览器运行代码的时候,提示 Uncaught ReferenceError: require is not defined babel只是个翻译,假设a.js 里 import 了 b.js 对a.js进行转码,只是翻译了a.js,并不会把b.js的内容给读取合并进来 如果想在最终的某一个js里,包含 a.js,b.js 的代码,那就需要用到打包工具 也就是webpack等工具了 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
-
babel的使用及安装配置教程
简介 babel是一个广泛使用的转码器,可以将ES6代码转化为ES5代码,从而在现有环境执行,这意味着,你可以现在就用ES6编写程序,而不用担心现有环境是否支持. 安装及配置 npm install babel-cli --save-dev 或者 cnpm install babel-cli --save-dev使用淘宝镜像安装会更快. 步骤:进入项目 ==>cnpm install babel-cli --save-dev 为什么不安装在全局 如果安装在全局,那意味着项目要运行,全局环境必须有
-
VMware 12中CentOS 6.5 64位安装配置教程
前言:本人在配置Hadoop的过程中,需要搭建Cent OS 64 环境,借此,顺便将Cent OS 64 的安装在此记录,方便自己,也方便大家学习.本次是在VM12虚拟机中实现Cent OS 64 的安装以及配置,后续还会有Hadoop的安装配置教程,我们先来进行第一步. 一.VMware 12 Install CentOS 64(Linux)OS create a new vm->there I screenshot my settings in the next steps-> keep
-
Centos7.3下mysql5.7安装配置教程
本文大家分享了mysql5.7安装配置教程,供大家参考,具体内容如下 第一步:获取mysql YUM源 进入mysql官网获取RPM包下载地址 https://dev.mysql.com/downloads/repo/yum/ 点击 下载 右击 复制链接地址https://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm 得到这个 这个就是Yum仓库的rpm包 其实就是一个下载地址 第二步:下载和安装mysql源 先下载
-
Windows2003下php5.4安装配置教程(IIS)
本文与<Windows2003下php5.4安装配置教程(Apache2.4)>(点击打开链接)为姊妹篇,只是php所用的服务器有点不同,这里一个是Apache2.4,一个是Windows2003自带的IIS服务器. 一.在Windows2003安装IIS 1.首先打开Windows2003的控制面板,查看是否有"管理工具",没有也不要紧,点击"添加或删除程序".有的话,可以直接进入第二步,IIS的配置. 2.在弹出的窗口,选择添加/删除Windows组
-
MySQL5.6.31 winx64.zip 安装配置教程详解
#1. 下载 # #2.解压到本地 修改必要配置my*.ini #3.mysql install admin模式启动cmd cd mysql目录/bin 执行安装: mysqld -install 启动mysql服务: net start mysql 关闭mysql服务: net stop mysql #4.mysql 编码配置 <解压版MySQL-5.6.31-winx64 编码配置> 在根目录下面有已经写好的"my-"开头的ini文件,如:my-default.ini.
-
Windows下mysql5.7.18安装配置教程
本文为大家分享了Windows下mysql5.7.18安装配置教程,供大家参考,具体内容如下 准备: 操作系统:win7 下64位的zip版本的MySQL,路径:http://dev.mysql.com/downloads/mysql/ 我下的是最新版的MySQL,解压后,目录如下: 可以看到上图,mysql5.7.18它没有data目录,如果没有data目录,安装后启动的时候就会报错: 正确安装步骤如下: 1. 进入dos的命令行,以管理员身份运行. 2. 进入MySQL的bin目录,输入my
-
MySql 5.7.17免安装配置教程详解
1.下载mysql-5.7.17-winx64.zip安装包(链接:https://dev.mysql.com/downloads/mysql/) 2.解压安装包. D:\DevelopTool\mysql-5.7.17-winx64 #解压目录 3.在解压目录下创建一个名为data的文件夹,用来存放数据 D:\DevelopTool\mysql-5.7.17-winx64\data 4.配置启动文件 把 D:\DevelopTool\mysql-5.7.17-winx64\my-defau
-
windows nfs 服务端安装配置教程
windows7下面安装nfs客户端命令: 打开或关闭windows功能>nfs服务(勾选上)重启 hanewin(windows7下安装nfs服务)使用: 下载地址:http://www.hanewin.net/ 安装后需要生成注册码: liyuan3210/FBLZ3577F37E78FB 1.安装好后首先需要配置nfs服务端 NFS Server>Exports配置服务端目录 d:\nfsroot -name:nfsroot -umask:000 -public -mapall:0 2.
-
mysql 5.7.11 winx64安装配置教程
本文以MySQL5.7.11为例,介绍mysql5.7.zip在win系统下的安装. 一.前提条件: 1. win管理员 2. MySQL安装包(zip包) 二.安装过程 首先解压MySQL安装包到自己想安装的路径(比如D:\javaide\mysql-5.7.11-winx64),然后编辑my-default.ini文件,在[mysqld]下配置数据库根目录,数据存放目录,软件端口: basedir = D:/javaide/mysql-5.7.11-winx64 datadir = D:/j
-
mysql 5.7.17 winx64安装配置教程
今天又一次的在电脑上装MySQL数据库.每次重装系统,都要重装一下数据库,但是每次都要百度参考一下百度上安装配置教程.于是决定自己没事时也写一个博文介绍一下MySQL的安装教程.这是我第一次写博文,有不好的地方希望能够得到各位大神的谅解! 接下来开始介绍我的安装介绍: 我的电脑是win764位,所以,本博文介绍的也是64位安装的. 1.所以第一步要去http://dev.mysql.com/downloads/mysql/下载Windows (x86, 64-bit), ZIP Archive
随机推荐
- 详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
- 不可不知的12则Photoshop文本操作技巧
- 深入解析JVM对dll文件和对类的装载过程
- Swift语言中字符串相关的基本概念解析
- asp.net单文件带进度条上传的解决方案
- php处理复杂xml数据示例
- python中使用序列的方法
- c#判断数据库服务器是否已经启动的方法
- Android Studio中快捷键实现try catch等功能包含代码块的实现方法
- mysql 5.7.18 zip版安装配置方法图文教程(win7)
- Mysql中返回一个数据库的所有表名,列名数据类型备注
- C#结合JavaScript实现秒杀倒计时的方法
- 为添加和删除程序提速的三种方法
- 解决C# winForm自定义鼠标样式的两种实现方法详解
- 浅谈Java继承中的转型及其内存分配
- 详解IOS宏与常量的使用(define,const)
- Android多边形区域递归种子填充算法的示例代码
- C#打印PDF文档的10种方法(小结)
- iOS自动进行View标记的方法详解
- shell脚本字符串和数组的使用操作方法