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关键字
赞 (0)

相关推荐

  • 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

  • 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) 参数来编译一个

  • webpack使用 babel-loader 转换 ES6代码示例

    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

  • 让nodeJS支持ES6的词法----babel的安装和使用方法

    让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,

  • 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位安装配置教程

    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安装配置教程

    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安装配置教程（IIS）

    本文与<Windows2003下php5.4安装配置教程(Apache2.4)>(点击打开链接)为姊妹篇,只是php所用的服务器有点不同,这里一个是Apache2.4,一个是Windows2003自带的IIS服务器. 一.在Windows2003安装IIS 1.首先打开Windows2003的控制面板,查看是否有"管理工具",没有也不要紧,点击"添加或删除程序".有的话,可以直接进入第二步,IIS的配置. 2.在弹出的窗口,选择添加/删除Windows组

  • MySQL5.6.31 winx64.zip 安装配置教程详解

    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安装配置教程

    本文为大家分享了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 5.7.17 winx64安装配置教程

    今天又一次的在电脑上装MySQL数据库.每次重装系统,都要重装一下数据库,但是每次都要百度参考一下百度上安装配置教程.于是决定自己没事时也写一个博文介绍一下MySQL的安装教程.这是我第一次写博文,有不好的地方希望能够得到各位大神的谅解! 接下来开始介绍我的安装介绍: 我的电脑是win764位,所以,本博文介绍的也是64位安装的. 1.所以第一步要去http://dev.mysql.com/downloads/mysql/下载Windows (x86, 64-bit), ZIP Archive

随机推荐