babel 编写plugin(二)----常用的babel

babel-loader

本质是一个函数，函数参数是源代码和配置参数option,函数返回转换后的代码
配置参数可以通过loader配置，也可以在babel.rc文件文件传入

babel-core

babel最核心的模块，是babel转译器本身，提供转译的API，例如babel.transform等，babel-loader就是调用core中的这些API完成转译的

babel-preset-env

告诉babel以什么规则转换，也就是preset的值，core.transform里面的参数规则
下面babel-loader关键的流程代码

const core = require('@babel/core');
function babelLoader(souces, options) {
	let target = core.transform(souces, {
		presets: ['babel-preset-env'],
		plugins: [...]
	})
}

babel-polyfill

babel-preset-env 只是转化es的相关语法，比如 let、const、()=>
但是es相关 的api和方法无法转化，例如：promise、Array.from等

实现原理

通过向全局方法添加某些api,或者重写原型上某些方法，例如String.prototype.include,在引入polyfill之后便在全局的String对象上添加include方法

应用

babel-preset-env里面有个配置useBuiltIns决定了用户是否使用polyfill

{
	prestes: [
		'bable-preset-env': {
	: 		useBuiltIns: false   //仅仅只转换es语法，不会转es相关api和方法
	        //entry 全量引入polyfill
	        //usage 按需引入，如果项目中只用了Array.from，就只会转化这一个，其它的String.prototype.include不会转化
	        //根据支持的浏览器进行转化
		}
	]
}

babel-runtime

按需引入相关的转化代码，但是不是很智能，需要手动引入，而且编译后会多出很多代码，需要结合tranform-runtime 使用

plugin-tranform-runtime

为了解决上述问题，1.手动引入 2.编译后出现重复的问题