Tool系列—Babel

Easter79
• 阅读 516

1、简单介绍

     这些转换器 (更准确地说是源代码到源代码的编译器) 可以把你写的符合 ECMAScript 6 标准的代码完美地转换为 ECMAScript 5 标准的代码,并且可以确保良好地运行在所有主流 JavaScript 引擎中。

    Babel对 ES6 的支持程度比其它同类更高,而且 Babel 拥有完善的文档和一个很棒的    在线交互式编程环境

2、学习资料

=========

Babel官网

http://babeljs.io/docs/setup/

3、Babel介绍

    babel可以惊醒单独使用。

3.1、环境安装

npm install --global babel-cli

3.2、编译单独文件


Compile the file script.js and output to stdout.

$ babel script.js # output...

If you would like to output to a file you may use --out-file or -o.

$ babel script.js --out-file script-compiled.js

To compile a file every time that you change it, use the --watch or -w option:

$ babel script.js --watch --out-file script-compiled.js

3.3、Compile with Source Maps(不太会用,回头再说)

If you would then like to add a source map file you can use --source-maps or -s. Learn more about source maps.

$ babel script.js --out-file script-compiled.js --source-maps

If you would rather have inline source maps, you may use --source-maps inline.

$ babel script.js --out-file script-compiled.js --source-maps inline

3.4、编译文件夹


Compile the entire src directory and output it to the lib directory. You may use --out-dir or -d.

$ babel src --out-dir lib

Compile the entire src directory and output it to the one concatenated file.

$ babel src --out-file script-compiled.js

3.5、管道文件(Piping Files)(应用场景不太清楚)

Pipe a file in via stdin and output it to script-compiled.js

$ babel --out-file script-compiled.js < script.js

4、Babel-node介绍(应用场景不太清楚)

    就是和node的一样就是可以直接在cmd中敲命令,运行代码

    babel comes with a second CLI which works exactly the same as Node.js's CLI, only it will compile ES6 code before running it.

4.1、使用


    启动Launch a REPL (Read-Eval-Print-Loop).

$ babel-node

    评估Evaluate code.

$ babel-node -e "class Test { }"

    编译Compile and run test.js.

$ babel-node test

4.2、应用


$ babel-node [options] [ -e script | script.js ] [arguments]

When arguments for user script have names conflicting with node  options, double dash placed before script name can be used to resolve  ambiguities

$ babel-node --debug --presets es2015 -- script.js --debug

4.3、配置

Option

Default

Description

-e, --eval [script]

Evaluate script

-p, --print

Evaluate script and print result

-i, --ignore [regex]

node_modules

Ignore all files that match this regex when using the require hook

-x, --extensions

".js",".jsx",".es6",".es"

List of extensions to hook into

presets

[]

List of presets (a set of plugins) to load and use.

plugins

[]

List of plugins to load and use.

5、配置文件

=========

    创建 .babelrc配置文件,这里面可以放插件

    你应该准确的告诉babel应该编译成什么东西

Great! You've configured Babel but you haven't made it actually do anything. Create a .babelrc config in your project root and enable some plugins.

Note

Pre-6.x, Babel enabled certain transformations by default. However, Babel 6.x does not ship with any transformations enabled. You need to explicitly tell it what transformations to run. The simplest way to do this is by using a preset, such as the ES2015 Preset.

6、预设(Presets)

    babel已经为大家准备了一些预设插件,用来处理一些操作,比如es2015和react

7、Gulp中使用babel

=================

https://github.com/babel/gulp-babel

8、webpack中使用babel

https://github.com/babel/babel-loader

9、其他

①****我们如果不会用可以去github中搜索 gulp  babel的快速开始文档,需要哪些知识点整合的就输入哪些关键字

②****我们在搜索一些学习的博客和文章的时候,先看发表日期,这些开源项目现在更新的很快,有些东西的用法都改变了,最好跟着官网走

②  http://blog.csdn.net/yczz/article/category/354754  这哥们的ria可以看一下

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
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
Karen110 Karen110
2年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
Wesley13 Wesley13
2年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Easter79 Easter79
2年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
3个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k