webpack学习之babel转换

babel配置

babel配置方式两种

1. 在package.json中配置

{
	"name": "program",
	"babel": {
		"presets": ["@babel/preset-env"]
	}
}

2. 创建.babelrc

{
	"presets": ["@babel/preset-env"]
}

为不同的环境使用不同的配置， env的值将从process.env.BABEL.ENV获取， process.env.BABEL.ENV没有值则获取process.env.NODE_ENV的值，也无法获取时默认值为development

{
    "env": {
        "production": {
            "presets": ["@babel/preset-env"]
        },
        "development": {
            "presets": ["@babel/preset-env"]
        }
    }
}

babel插件

babel插件分为两类，进行语法转换的转换插件和进行语法扩展的语法解析插件，最常用的是使用插件预设组合preset(又叫插件预设)，其中最常见的@babel/preset-env。

@babel/preset-env是 Babel 官方推出的插件预设，它可以根据开发者的配置按需加载对应的插件，通过@babel/preset-env我们可以根据代码执行平台环境和具体浏览器的版本来产出对应的
JavaScript 代码，例如可以设置代码执行在 Node.js 8.9 或者 iOS 12 版本。

babel polyfill

Babel 只负责进行语法转换，即将 ES6 语法转换成 ES5 语法，但是如果在 ES5 中，有些对象、方法实际在浏览器中可能是不支持的，例如：Promise、Array.prototype.includes，这时候就需要用@babel/polyfill来做模拟处理。@babel/polyfill使用方法是先安装依赖，然后在对应的文件内显性的引入

// polyfill
import '@babel/polyfill';

直接引入@babel/polyfill会导致两个问题

1. 修改内置的原型， 造成全局污染
2. 不发按需引入， 导致最后产出包过大
   babel polyfill最佳方式

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "useBuiltIns": "usage",	//用来设置浏览器polyfill, usage表示明确用到的polyfill引用，在一些 ES2015+ 语法不支持的环境下，每个需要用到 Polyfill 的引用时，会自动加上。
                "corejs": 3,
           
            }
        ]
    ]
}