一.babel编译ES6
babel-core:封装了babel编译时需要使用的API
babel-loader:负责es6语法转化,webpack打包时使用babel-loader处理javascript文件
-
npm install babel-loader @babel/core -D
-
npm install babel-loader @
7.1
.5 babel-core -D
-
babel-loader
8.x对应 babel-core7.x
-
babel-loader
7.x对应 babel-core6.x
-
module:{
-
rules:[{
-
test:
/\.js$/,
-
use:
'babel-loader',
-
exclude:
/(node_modules)/ 排除配置
-
}]
-
}
二.编译插件
1.babel-preset-env:用于编译es6语法,是一个新的preset,可以根据配置的目标运行环境自动启用需要的babel插件
2.babel-prest-es2015:用于编译es6语法
3.babel-prest-es2017:用于编译es7语法
4.babel-preset-latest:一个特殊的presets,包括了es2015,es2016，es2017的插件(目前位置，以后会加入es2018)
5.babel-preset-react:用于编译jsx和flow语法加入
(1).babel-preset-env
现如今不同的浏览器和平台chrome、opera、firefox、safari、ie、ios、android、node这些es运行环境对es6\7\8支持不一，需要特定转码
-
npm i babel-preset-env -D
-
在babel(.babelrc)配置文件中
-
{
-
"presets":[
"env"]
-
}
(2).targets
modules指定何种形式的模块，设置为false表示不转码模块
-
.babelrc{
-
"presets":[
-
[
"env",
-
{
-
"targets":{
-
"browsers":[
-
"last 2versions"
-
]
-
}
-
}
-
]
-
]
-
}
三.全局-局部垫片
(1).babel-polyfill
Babel默认只转换新的JavaScript，而不转换新的API,比如Generator、Set、Maps、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法(Object.assign)都不会转码
Es6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行、必需使用babel-polyfill,为当前环境提供一个垫片
npm install babel-polyfill -S
-
index.js
-
import
'babel-ployfill';
-
function* func(){} 这样则无报错
1.(浏览器环境)单独在html的<head>标签中引入babel-ployfill.js
2.在package.json中添加babel-polyfill依赖,在webpack配置文件增加入口如
-
entry:[
-
"babel-polyfill",
-
"./src/app.js"
-
]ployfill将会打包进这个入口文件中，而且是放在文件最开始的地方
3.在package.json中添加babel-polyfill依赖，在webpack入口文件顶部使用import引入
(2).babel-plugin-transform-runtime/.babel-runtime
在webpack中,.babel-plugin-transform-runtime实际上是依赖babel-runtime因为babel编译es6到es5的过程中,babel-plugin-transform-runtime这个插件会自动polyfill es5不支持的特性
这些poliyfill包就是在babel-runtime这个包里
例如:core-js,regenerator等polyfill
babel-runtime和babel-plugin-transform-runtime的区别是,相当前者是手动挡而后者是自动挡,每当要转译一个api时都要手动加上require('babel-runtime'),
而babel-plugin-transform-runtime会由工具自动添加,主要的功能是为api提供沙箱的垫片方案，不会污染全局的api,因此适合用在第三方开发产品中
npm i babel-runtime babel-plugin-transform-runtime -D.babelrc中配置插件:"plugins":["transform-runtime"]
代码中可以直接使用ES6的新特性，无需import额外东西，webpack也不需要做配置
转载：https://blog.csdn.net/Yesterday_Tomorrow/article/details/114290631