这个是解析我们es6的代码的,为什么要用它呢,因为对于一些ie浏览器,甚至FF浏览器,低版本的还不能识别我们的es6代码,那么vue里面好多还让我们去写es6的代码,这个时候我们就可以用babel这个工具将我们的es6的代码转译成浏览器能识别的代码

左边是我们写的es6代码,右边是通过babel这个工具编译之后的代码。这个代码能在我们各个浏览器中去识别。

所以我们成为babel,是用于编写下一代JavaScript的编译器。

模块化

在前端中一个js文件就是一个模块,在js中没有模块化的概念。

目前有四种模块化的方法

1.Commonjs

2.AMD

3.CMD

4.ES6Module

es6Module 支持import和export。跟python的import很像。但它必须在服务器环境下才支持,或者我们可能通过webpack的babel-loader将es6支持转化成es6的语言。

在这里就不给大家演示,大家了解一下即可。后面咱们使用vue开启项目之后,一使用,自然而然就明白了。

09-babel的更多相关文章

  1. Windows7WithSP1/TeamFoundationServer2012update4/SQLServer2012

    [Info   @09:03:33.737] ====================================================================[Info   @ ...

  2. 学习 React(jsx语法) + es2015 + babel + webpack

    视频学习地址: http://www.jtthink.com/course/play/575 官方地址 https://facebook.github.io/react/ 神坑: 1.每次this.s ...

  3. Sublime插件支持Sass编译和Babel解析ES6 & .sublime-build文件初探

    用Sublime Text蛮久了,配置配来配去的,每次换电脑都得重头再配过,奈何人老了脑子不中用了,得好好整理一些,下次换电脑就有得参考了.. 同事说,他的WebStorm简直太方便,自身集成了很多方 ...

  4. webpack 3.X学习之Babel配置

    Babel是什么 Babel是一个编译JavaScript的平台,它的强大之处表现在可以通过编译帮你达到: 使用下一代的javascript(ES6,ES7,--)代码,即使当前浏览器没有完成支持: ...

  5. 理解Babel是如何编译JS代码的及理解抽象语法树(AST)

    Babel是如何编译JS代码的及理解抽象语法树(AST) 1. Babel的作用是?   很多浏览器目前还不支持ES6的代码,但是我们可以通过Babel将ES6的代码转译成ES5代码,让所有的浏览器都 ...

  6. babel配置

      首页 首页 首页 博客园 博客园 博客园 联系我 联系我 联系我 demo demo demo GitHub GitHub GitHub 管理 管理 管理 魔魔魔芋芋芋铃铃铃 [02]websto ...

  7. Sublime插件支持Sass编译和Babel解析ES6 & .sublime-build文件初探(转载自imwtr)

    原文请看:http://www.cnblogs.com/imwtr/p/6010550.html   用Sublime Text蛮久了,配置配来配去的,每次换电脑都得重头再配过,奈何人老了脑子不中用了 ...

  8. 【02】webstorm配置babel转换器+截图(by魔芋)

    [02]webstorm配置babel转换器+截图(by魔芋)   [02]魔芋的安装过程     01,配置babel.   02,用webstorm.注意webstorm的版本号.   03,使用 ...

  9. 【Babel】293- 初学 Babel 工作原理

    戳蓝字「前端技术优选」关注我们哦! 前言 babel Babel 对于前端开发者来说应该是很熟悉了,日常开发中基本上是离不开它的. 已经9102了,我们已经能够熟练地使用 es2015+ 的语法.但是 ...

  10. 前端工程师需要掌握的 Babel 知识

    在前端圈子里,对于 Babel,大家肯定都比较熟悉了.如果哪天少了它,对于前端工程师来说肯定是个噩梦.Babel 的工作原理是怎样的可能了解的人就不太多了.本文将主要介绍 Babel 的工作原理以及怎 ...

随机推荐

  1. shell linux 环境下循环遍历文件夹下所有文件

    demofun(){ ` do if test -f $file then echo "file: $file" elif test -d $file then echo &quo ...

  2. php学习----运算符

    PHP 1.运算符 加减乘除与数学运算无异 但PHP的赋值运算符有两种,分别是: (1)"=":把右边表达式的值赋给左边的运算数.它将右边表达式值复制一份,交给左边的运算数.换而言 ...

  3. jdk旧版本下载

    如何找到旧版本的jdk: 1.去oracle官网关于下载jdk的这一板块,https://www.oracle.com/technetwork/java/javase/downloads/index. ...

  4. 【技术与商业案例解读笔记】095:Google大数据三驾马车笔记

     1.谷歌三驾马车地位 [关键词]开启时代,指明方向 聊起大数据,我们通常言必称谷歌,谷歌有“三驾马车”:谷歌文件系统(GFS).MapReduce和BigTable.谷歌的“三驾马车”开启了大数据时 ...

  5. 【HNOI2016】大数

    [HNOI2016]大数 题目链接 题目描述 小 B 有一个很大的数 $ S $,长度达到了 $ N $ 位:这个数可以看成是一个串,它可能有前导 $ 0 $,例如 00009312345 .小 B ...

  6. centos7下kubernetes(3。部署kubernetes)

    环境:三个centos7 K8s2是Master;K8s1是node1:K8s3是node2 官方文档:https://kubernetes.io/docs/setup/independent/ins ...

  7. tensorflow中的name_scope, variable_scope

    在训练深度网络时,为了减少需要训练参数的个数(比如LSTM模型),或者是多机多卡并行化训练大数据.大模型等情况时,往往就需要共享变量.另外一方面是当一个深度学习模型变得非常复杂的时候,往往存在大量的变 ...

  8. 图上最短路(Dijkstra, spfa)

    单源最短路径 题目描述 如题,给出一个有向图,请输出从某一点出发到所有点的最短路径长度. 输入输出格式 输入格式: 第一行包含三个整数N.M.S,分别表示点的个数.有向边的个数.出发点的编号. 接下来 ...

  9. 6-MVC结构简介

    一.javeEE的项目结构层次:MVC1.Model:模型层(DAO+业务层) 2.View:视图层 jsp3.Control:控制层 servlet 二.分层的原则:1.层与层之间松耦合,层内保持高 ...

  10. ESP8266串口和MQTT服务器消息互传(版本一) 单纯透传+保存WIFI账号信息

    目标 制作一个ESP8266串口和MQTT相互透传的小WIFI,可用手机修改其连接的路由器,由此该模块可以任意加载到各种串口传输的单片机上,完成硬件到云端的传输. 1 实物图 2 MQTT网页测试客户 ...