vue项目中常见的一些preset及其关系

Babel的作用

Babel主要用途是用来做js代码转换的，将最新的js语法或者api转换成低版本浏览器可兼容执行的代码。

语法兼容是指一些浏览器新特性增加的js写法，例如箭头函数 ()=>{}；低版本的浏览器无法识别这些，会导致一些语法解析错误。

api兼容是指随着浏览器版本迭代，新增的一些Api方法，比如Object.assign是ES6的语法，在只支持es5语法的浏览器中，Object对象并没有该方法，会导致调用错误。

preset和polyfill

Babel主要通过**@babel/preset-env和对应的polyfill**来实现API的兼容性。

具体来说，Babel默认只转换新的JavaScript句法（syntax），而不转换新的API。例如，像Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会被Babel直接转码。

为了处理这些新的API，我们可以使用@babel/preset-env。当设置了useBuiltIns选项（不为false）时，@babel/preset-env就会使用polyfill来对API进行处理。而@babel/preset-env主要是依赖core-js来处理API的兼容性，所以需要事先安装core-js。

此外，当配置了useBuiltIns: 'usage’时，Babel会自动将代码里已使用到的且browserslist环境不支持的polyfill导入，而无需在代码中主动import。

另外，babel-polyfill也可以用来为当前环境提供一个垫片，从而实现ES6新API的兼容。但请注意，babel-polyfill已被废弃，推荐使用@babel/preset-env和core-js的组合来替代。

总的来说，Babel通过@babel/preset-env和对应的polyfill（如core-js）来提供API的兼容性。在配置和使用时，需要根据项目的需求和目标浏览器来选择合适的preset和polyfill版本。

preset的Babel配置方式

{presets: ['@vue/cli-plugin-babel/preset']
}

常见预设

1、 @vue/cli-plugin-babel/preset

等价于：@vue/babel-preset-app

2、@vue/babel-preset-app

该预设包含：@babel/preset-env，同时包含以下依赖

{"@babel/core": "^7.11.0","@babel/helper-compilation-targets": "^7.9.6","@babel/helper-module-imports": "^7.8.3","@babel/plugin-proposal-class-properties": "^7.8.3","@babel/plugin-proposal-decorators": "^7.8.3","@babel/plugin-syntax-dynamic-import": "^7.8.3","@babel/plugin-syntax-jsx": "^7.8.3","@babel/plugin-transform-runtime": "^7.11.0","@babel/preset-env": "^7.11.0","@babel/runtime": "^7.11.0","@vue/babel-plugin-jsx": "^1.0.3","@vue/babel-preset-jsx": "^1.2.4","babel-plugin-dynamic-import-node": "^2.3.3","core-js": "^3.6.5","core-js-compat": "^3.6.5","semver": "^6.1.0"}

从中可以看出该预设支持jsx语法。

该预设在不指定option配置的情况下，useBuiltIns默认设置为usage

3、@vue/babel-preset-jsx包含以下依赖项

{"@vue/babel-helper-vue-jsx-merge-props": "^1.2.1","@vue/babel-plugin-transform-vue-jsx": "^1.2.1","@vue/babel-sugar-composition-api-inject-h": "^1.2.1","@vue/babel-sugar-composition-api-render-instance": "^1.2.4","@vue/babel-sugar-functional-vue": "^1.2.2","@vue/babel-sugar-inject-h": "^1.2.2","@vue/babel-sugar-v-model": "^1.2.3","@vue/babel-sugar-v-on": "^1.2.3"}

4、@babel/preset-env

{"@babel/compat-data": "^7.14.0","@babel/helper-compilation-targets": "^7.13.16","@babel/helper-plugin-utils": "^7.13.0","@babel/helper-validator-option": "^7.12.17","@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.13.12","@babel/plugin-proposal-async-generator-functions": "^7.14.2","@babel/plugin-proposal-class-properties": "^7.13.0","@babel/plugin-proposal-class-static-block": "^7.13.11","@babel/plugin-proposal-dynamic-import": "^7.14.2","@babel/plugin-proposal-export-namespace-from": "^7.14.2","@babel/plugin-proposal-json-strings": "^7.14.2","@babel/plugin-proposal-logical-assignment-operators": "^7.14.2","@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.2","@babel/plugin-proposal-numeric-separator": "^7.14.2","@babel/plugin-proposal-object-rest-spread": "^7.14.2","@babel/plugin-proposal-optional-catch-binding": "^7.14.2","@babel/plugin-proposal-optional-chaining": "^7.14.2","@babel/plugin-proposal-private-methods": "^7.13.0","@babel/plugin-proposal-private-property-in-object": "^7.14.0","@babel/plugin-proposal-unicode-property-regex": "^7.12.13","@babel/plugin-syntax-async-generators": "^7.8.4","@babel/plugin-syntax-class-properties": "^7.12.13","@babel/plugin-syntax-class-static-block": "^7.12.13","@babel/plugin-syntax-dynamic-import": "^7.8.3","@babel/plugin-syntax-export-namespace-from": "^7.8.3","@babel/plugin-syntax-json-strings": "^7.8.3","@babel/plugin-syntax-logical-assignment-operators": "^7.10.4","@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3","@babel/plugin-syntax-numeric-separator": "^7.10.4","@babel/plugin-syntax-object-rest-spread": "^7.8.3","@babel/plugin-syntax-optional-catch-binding": "^7.8.3","@babel/plugin-syntax-optional-chaining": "^7.8.3","@babel/plugin-syntax-private-property-in-object": "^7.14.0","@babel/plugin-syntax-top-level-await": "^7.12.13","@babel/plugin-transform-arrow-functions": "^7.13.0","@babel/plugin-transform-async-to-generator": "^7.13.0","@babel/plugin-transform-block-scoped-functions": "^7.12.13","@babel/plugin-transform-block-scoping": "^7.14.2","@babel/plugin-transform-classes": "^7.14.2","@babel/plugin-transform-computed-properties": "^7.13.0","@babel/plugin-transform-destructuring": "^7.13.17","@babel/plugin-transform-dotall-regex": "^7.12.13","@babel/plugin-transform-duplicate-keys": "^7.12.13","@babel/plugin-transform-exponentiation-operator": "^7.12.13","@babel/plugin-transform-for-of": "^7.13.0","@babel/plugin-transform-function-name": "^7.12.13","@babel/plugin-transform-literals": "^7.12.13","@babel/plugin-transform-member-expression-literals": "^7.12.13","@babel/plugin-transform-modules-amd": "^7.14.2","@babel/plugin-transform-modules-commonjs": "^7.14.0","@babel/plugin-transform-modules-systemjs": "^7.13.8","@babel/plugin-transform-modules-umd": "^7.14.0","@babel/plugin-transform-named-capturing-groups-regex": "^7.12.13","@babel/plugin-transform-new-target": "^7.12.13","@babel/plugin-transform-object-super": "^7.12.13","@babel/plugin-transform-parameters": "^7.14.2","@babel/plugin-transform-property-literals": "^7.12.13","@babel/plugin-transform-regenerator": "^7.13.15","@babel/plugin-transform-reserved-words": "^7.12.13","@babel/plugin-transform-shorthand-properties": "^7.12.13","@babel/plugin-transform-spread": "^7.13.0","@babel/plugin-transform-sticky-regex": "^7.12.13","@babel/plugin-transform-template-literals": "^7.13.0","@babel/plugin-transform-typeof-symbol": "^7.12.13","@babel/plugin-transform-unicode-escapes": "^7.12.13","@babel/plugin-transform-unicode-regex": "^7.12.13","@babel/preset-modules": "^0.1.4","@babel/types": "^7.14.2","babel-plugin-polyfill-corejs2": "^0.2.0","babel-plugin-polyfill-corejs3": "^0.2.0","babel-plugin-polyfill-regenerator": "^0.2.0","core-js-compat": "^3.9.0","semver": "^6.3.0","@babel/core": "7.14.2","@babel/core-7.12": "npm:@babel/core@7.12.9","@babel/helper-plugin-test-runner": "7.13.10","@babel/plugin-syntax-dynamic-import": "^7.8.3"}