关键词：
平时开发中，经常需要用到ES6/ES7的语法。那么就需要用到Babel来对代码进行转码处理。
之前用Vue比较多，所以以Vue-cli作为参考来分析。
第一张图是几个月前的Vue-cli生成的
第二个图是今天使用Vue-cli生成的
Babel-core
顾名思义，这是 babel 的核心代码，但是在我们构建的时候不会直接调用 babel-core 。它是一个标准库，通常服务于各种 polyfill 等库，比如 babel-runtime, babel-plugin-transform-runtime, babel-polyfill 等。
Babel-loader
通常在我们使用webpack的时候，我们会先安装 babel-loader来作为加载器。
babel-preset-env 稍后介绍
cnpm i babel-loader babel-core babel-preset-env -D
这样在webpack中，可以这样
module exprots =
entry: __dirname + ‘/main.js‘,
output:
path: __dirname + ‘/public‘,
filename: ‘bundle.js‘
,
module:
rules: [
test: /(.jsx|.js)$/,
use:
loader: ‘babel-loader‘,
options:
presets: [‘env‘]
,
exclude: /node_module/
]
Babel-preset-es2015
之前的都是介绍的 babel-core babel-loader 并不能转码，而当我们想使用ES6语法时候就需要用到 babel-preset-es2015
这个包可以对 es2015 代码进行转码为ES5语法。当然如果使用了ES7语法，即async await 等语法，还是不能够支持的。
安装：
cnpm i babel-preset-es2015 -D
在使用webpack构建工具时，我们通常不会在webpack.config.js里直接对 babel 进行配置。而是在根目录下创建一个 .babelrc.js 的文件。
/* webpack.config.js */
module exprots =
entry: __dirname + ‘/main.js‘,
output:
path: __dirname + ‘/public‘,
filename: ‘bundle.js‘
,
module:
rules: [
test: /(.jsx|.js)$/,
use:
loader: ‘babel-loader‘
,
exclude: /node_module/
]
/* .babelrc.js */
"presets": ["es2015"]
需要特别注意的是， babel-preset-es2015 虽然可以对ES6转码，但是它只会对ES6的语法进行转码，并不会对API进行转码。也就是说它可以对箭头函数，promise转码，但不会对Array.from，Array.find等转码。
所以为了能够使用ES6的API，我们还需要进行更深入的配置。
Babel-plugin-transform-runtime
安装:
cnpm i babel-plugin-transform-runtime -D
使用：
/* .babelrc */
"presets": ["es2015"],
"plugins": ["transform-runtime"]
这样就可以自由使用promise了。
但是这个方案有一些特点
特点：官方建议在 lib 上使用，因为该方案没有全局变量和 prototype 污染。
1，因为相当于是在沙箱操作，没有在全局对象中声明变量。
2，正是因为没有 prototype 污染，所以对于一些内置类型扩展的方法是没办法 polyfill 的。比如： Array.prototype.find Array.prototype.filter 等。但是可以对静态方法进行 polyfill。
优点： 可以按需引用。
Babel-polyfill
正是因为 babel-polyfill 的特点，让开发者通常使用 babel-polyfill 进行开发。
安装：
cnpm i babel-polyfill -D
使用：
/* main.js(入口文件) */
import ‘babel-polyfill‘
这样就OK啦，在使用 babel-polyfill 后，就不需要引入 babel-plugin-transform-runtime 了，并且它在浏览器支持Promise时使用 原生的promise，如果不支持才会使用polyfill。
但是最大的缺点就是不能按需引用，文件比较大。
unitofwork知多少(代码片段)
原文链接：https://www.cnblogs.com/sheng-jie/p/7416302.html1.引言Maintainsalistofobjectsaffectedbyabusinesstransactionandcoordinatesthewritingoutofchangesandtheresolutionofconcurrencyproblems.UnitofWork 查看详情
overflow知多少（转）
最近在研究OOCSS，当打开template.css阅读第一行时，震惊了，第一眼居然没看懂。。。。。。以下就是OOCSS下的template.css第一行代码：12.bodyoverflow:hidden;_overflow:visible;_zoom:1;.mainoverflow:hidden;_overflow:visible;_zoo 查看详情
玩转springboot原理篇（核心注解知多少）(代码片段)
type=FilterType.CUSTOM,classes=TypeExcludeFilter.classtype=FilterType.CUSTOM,classes=AutoConfigurationExcludeFilter.classSpringBootApplicationSpringBootConfigurationComponentScanEnableAutoConfiguratio 查看详情
__attribute__你知多少(代码片段)
__ATTRIBUTE__你知多少？GNUC 的一大特色就是__attribute__ 机制。__attribute__ 可以设置函数属性（FunctionAttribute ）、变量属性（VariableAttribute ）和类型属性（TypeAttribute ）。__attribute__ 书写特征是：__attribu 查看详情
io模型知多少|代码篇(代码片段)
引言之前的一篇介绍IO模型的文章IO模型知多少|理论篇比较偏理论，很多同学反应不是很好理解。这一篇咱们换一个角度，从代码角度来分析一下。socket编程基础开始之前，我们先来梳理一下，需要提前了解的几个概念：socket:直... 查看详情
[转]babel教程(代码片段)
在前端开发领域，浏览器兼容性问题从来不曾消失。除了CSS，我们还要面对JavaScript的兼容性问题。不同的浏览器讲着不同的JavaScript语言，不同的浏览器版本同样讲着不同的JavaScript语言。你用了JavaScript的A特性，能够在B浏览器上... 查看详情
typescriptinterfacevstype知多少(代码片段)
接口和类型别名非常相似，在大多情况下二者可以互换。在写TS的时候，想必大家都问过自己这个问题，我到底应该用哪个呢？希望看完本文会给你一个答案。知道什么时候应该用哪个，首先应该了解二者之间的相同点和不同点... 查看详情
转：css知多少——我来问你来答
1.引言 各位前端或者伪前端（比如作者本人）的同志们，css对你们来说不是很陌生。比如我，在几年之前上大学的时候，给外面做网站就用css，而且必须用css。这样算下来也得六年多了，有些功能可能轻车熟路，有些功能可... 查看详情
转babel那些事儿(代码片段)
本篇介绍babel的概念和用法。从前，一提到新东西，我的反应就是兼容性好不好，如果不能满足产品经理的需求，就还是用保守的方式实现吧。毕竟前端开发是一件很灵活的事，怎么写都行，至于为何会用某种方法，一定是综合... 查看详情
[转]babel-present-env与babel-polyfill学习总结(代码片段)
babelrc配置文件"presets":[["env","modules":false,"useBuiltIns":true,"targets":"browsers":["last2versions","safari>=7","ie>=9"]],"stage-0","react"],"plugins":["syntax-dynamic-import",["import", 查看详情
int类型知多少(代码片段)
前言：整型是MySQL中最常用的字段类型之一，通常用于存储整数，其中int是整型中最常用的，对于int类型你是否真正了解呢？本文会带你熟悉int类型相关知识，也会介绍其他整型字段的使用。1.整型分类及存储范围整数类型字节... 查看详情
编码命名方式知多少(代码片段)
文章目录1.camelcase（驼峰式）2.snakecase（蛇形式）3.kebabcase（烤串式）4.匈牙利命名法5.小结参考文献编码时，命名无处不在。比如我们需要对文件命令，对目录命名，对变量命名，还有其他类... 查看详情
eshoponcontainers知多少[4]：catalogmicroservice(代码片段)
引言Catalogmicroservice（目录微服务）维护着所有产品信息，包括库存、价格。所以该微服务的核心业务为：产品信息的维护库存的更新价格的维护架构模式如上图所示，本微服务采用简单的数据驱动的CRUD微服务架构，来执行产品... 查看详情
babel配置文件.babelrc(代码片段)
Babel是一个广泛应用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。意味着可以使用ES6编写程序，而不用担心现有环境是否支持。Babel的配置文件是.babelrc，存放在项目的根目录下。使用Babel的第一步，就是配置这个... 查看详情
elasticsearch语法知多少之matchquery(代码片段)
目录目标ES版本信息官方文档相关术语创建相关的索引和文档（数据用于实战案例）创建索引索引文档Matchquery常见参数实战基本语法analyzer(指定分词器查询)operator(解释查询条件的布尔逻辑)minimum_should_match(最少匹配数)fuzzy... 查看详情
gtk4listmodel知多少？(代码片段)
【GTK4】LISTMODEL总结文章目录【GTK4】LISTMODEL总结一、LISTMODEL创建、管理工具1️⃣GtkSliceListModel2️⃣GtkFlattenListModel3️⃣GtkMapListModel二、LISTMODEL的具体应用1️⃣Pangoobjects2️⃣GtkDirectoryList和GtkBookmarkList3️⃣GtkDropDown三、LI 查看详情
gtk4listmodel知多少？(代码片段)
【GTK4】LISTMODEL总结文章目录【GTK4】LISTMODEL总结一、LISTMODEL创建、管理工具1️⃣GtkSliceListModel2️⃣GtkFlattenListModel3️⃣GtkMapListModel二、LISTMODEL的具体应用1️⃣Pangoobjects2️⃣GtkDirectoryList和GtkBookmarkList3️⃣GtkDropDown三、LI 查看详情
asp.netcore反向代理部署知多少(代码片段)
Nginx配置路由转发首先来看下IdentityServer4.Admin的项目结构：IdentityServer4.Admin/├──Id4.Admin.Api#用于提供访问Id4资源的WebApi项目├──Id4.Admin#用于提供管理Id4资源的Web管理面板├──Id4.STS.Identity#用于提供STS服务的Web项目作为... 查看详情