【Web全栈课程3】babel转换es6

戴森球
• 阅读 1481

Node使用简述

  1. 开发相对小规模的web后台,无法取代java,java高并发的各种特性node无法替代,一般作为中间层
  2. 作为工具类的应用 *

npm
node package manager,node的包管理器,安装node的时候会自动安装,便利性如下:

  1. 自动下载、升级
  2. 自动下载依赖包

说明:npm原版都非常慢,一般我们切换为国内的镜像,淘宝镜像:http://npm.taobao.org/
检验是否安装成功,打开控制台node -v、npm -v,返回node和npm版本的版本说明安装成功。
【Web全栈课程3】babel转换es6


babel简述

历史背景:es6刚刚出来的时候,各大浏览器并不支持es6,因此babel作为polyfill工具使用
官网:http://babeljs.io
当前定位:作为一个编译器,es6->es5
安装包命令:npm install babel

创建babel编译的工程

创建一个空的工程文件夹
1、npm init命令,输入后,会让我们输入很多项目相关信息,完成后生成会生成一个package.json文件。
【Web全栈课程3】babel转换es6

http://babeljs.io/docs/setup#... 指导了如何安装使用babel-cli
2、npm install --save-dev babel-cli,运行后工程下会生成node_moduls文件夹,里面都是工程的依赖包

  • --save-dev的简写是-D,作用是下载依赖包的同时,将依赖包的配置信息写入到package.json文件

【Web全栈课程3】babel转换es6

  • 我们可以移除node_modules,直接在项目下npm install,就会自动根据package.json文件里面的配置将需要的依赖包下载下来,对于大型项目依赖包很多的情况下能起到很好的管理作用。

3、package.json中的scripts配置,我们启动一个服务的时候经常需要带很多参数,每次启动都敲一次命令很复杂容易错,因此通过scripts配置执行脚本,通过简单命令启动服务。

  • 在scripts中配置"build": "babel src -d build",说明:babel 源文件 -d 目标文件
  • 我们在src下新建1.js测试文件,内容如下

    let a=12;
    let [b,c]=[5,8];
    const show=()=>{
      alert(a+b+c);
    }
    show();
  • 执行npm run build,发现build下生成了一个依旧是es6代码的js文件,babel的引导这里先让我们试错 = =

4、再创建一个.babelrc配置文件

  • 执行npm install babel-preset-env --save-dev,安装babel-preset-env依赖包
  • 在工程根目录创建.babelrc文件,配置babel的编译选项,提供了presets类似脚手架的功能。env的配置是根据环境自动进行默认预设。

    {
      "presets": ["env"]
    }
  • 这个时候再运行npm run build,发现babel将我们的es6代码编译为了es5代码,如下:

【Web全栈课程3】babel转换es6


浏览器运行结果

新建一个1.html引入src的1.js
1.在高级浏览器,例如chorme中打开1.html,可以正常执行
【Web全栈课程3】babel转换es6

2.在ie7下执行,发现报错了。
将引用换成babel转换后build下面的1.js文件(已经编译为es5的js),在ie中成功执行。
【Web全栈课程3】babel转换es6

点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Wesley13 Wesley13
4年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Jacquelyn38 Jacquelyn38
4年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
4年前
GoJS API学习
varnode{};node"key""节点Key";node"loc""00";//节点坐标node"text""节点名称";//添加节点通过按钮点击,添加新的节点到画布myDiagram.model.addNodeData(nod
Wesley13 Wesley13
4年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Easter79 Easter79
4年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
4年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
4年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
4年前
Node.js 中使用 ECDSA 签名遇到的坑
文/Fenying最近有个朋友问我关于Node.js下使用ECDSA的问题,主要是使用Node.js的Crypto模块无法校验网络传输过来的签名结果。在踩坑无数后,终于搞清楚了原因。坑0x00:签名输出格式在排除了证书、消息不一致的可能之后,我开始对比使用Node.js签名的结果与网络传输过来的签