一.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

targets 指定运行环境

targets.node 指定node版本

targets.browsers指定浏览器版本

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

package.json中添加依赖

.babelrc中配置插件:"plugins":["transform-runtime"]

代码中可以直接使用ES6的新特性，无需import额外东西，webpack也不需要做配置

# webpack
Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

cover

用 OpenAI Assistants 做大模型应用开发

avatar CSDN学习社区
cover

1 小时解读鸿蒙 10 大热点问题

avatar CSDN学习社区
cover

1 小时解读鸿蒙 10 大热点问题

avatar CSDN学习社区