前端追梦人Babel学习教程_usebuiltins": "usage", "corejs": "3.6.5"有什么用

1. Babel简介

Babel 是一个 JavaScript 编译器
Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
1.1 babel能做的事情

1. 语法转换
2. 通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块, 在main.js中通过import方式进行引入即可)
3. 源码转换 (codemods)
1.2 初级配置

npm install --save-dev @babel/core @babel/cli @babel/preset-env

npm install --save @babel/polyfill
  "presets": [
      "@babel/env",
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1",
        "useBuiltIns": "usage",
        "corejs": "3.6.5",
useBuiltIns含义

“useBuiltIns”: false,

此时不对 polyfill 做操作。如果引入 @babel/polyfill，则无视配置的浏览器兼容，引入所有的 polyfill。
“useBuiltIns”: “entry”,

“corejs”: 2,

根据配置的浏览器兼容，引入浏览器不兼容的 polyfill。需要在入口文件手动添加 import ‘@babel/polyfill’，会自动根据 browserslist 替换成浏览器不兼容的所有 polyfill。

这里需要指定 core-js 的版本, 如果 “corejs”: 3,

则 import ‘@babel/polyfill’ 需要改成

import ‘core-js/stable’;

import ‘regenerator-runtime/runtime’;
“useBuiltIns”: “usage”,

“corejs”: 2,

usage 会根据配置的浏览器兼容，以及你代码中用到的 API 来进行 polyfill，实现了按需添加。
1.3 插件和预设（preset）

代码转换功能以插件的形式出现，插件是小型的 JavaScript 程序，用于指导 Babel 如何对代码进行转换。你甚至可以编写自己的插件将你所需要的任何代码转换功能应用到你的代码上。例如将 ES2015+ 语法转换为 ES5 语法，我们可以使用诸如 @babel/plugin-transform-arrow-functions 之类的官方插件：
npm install --save-dev @babel/plugin-transform-arrow-functions
./node_modules/.bin/babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions
预设preset就是包含一系列插件的已有规则

因此我们可以通过指定预设来启用一组插件

就像插件一样，你也可以根据自己所需要的插件组合创建一个自己的 preset 并将其分享出去。J对于当前的用例而言，我们可以使用一个名称为 env 的 preset。
npm install --save-dev @babel/preset-env
./node_modules/.bin/babel src --out-dir lib --presets=@babel/env
使用nodejs api使用babel转译代码
const babel = require("@babel/core")
console.log(babel.transform("() => {console.log('hello world')}", {
    plugins: ["@babel/plugin-transform-arrow-functions"]		// 引用插件转译箭头函数
}).code)
插件的短名称

如果插件名称的前缀为 babel-plugin-，你还可以使用它的短名称：
  "plugins": [
    "myPlugin",
    "babel-plugin-myPlugin" // 两个插件实际是同一个
插件的排列顺序很重要。

这意味着如果两个转换插件都将处理“程序（Program）”的某个代码片段，则将根据转换插件或 preset 的排列顺序依次执行。
插件在 Presets 前运行。

插件顺序从前往后排列。

Preset 顺序是颠倒的（从后往前）

  "plugins": [
      "transform-async-to-module-method",
        "module": "bluebird",
        "method": "coroutine"
preset 的设置参数的工作原理完全相同：
  "presets": [
      "env",
        "loose": true,
        "modules": false
官网提供的预设
@babel/preset-env
@babel/preset-flow
@babel/preset-react
@babel/preset-typescript
Preset 的短名称

如果 preset 名称的前缀为 babel-preset-，你还可以使用它的短名称：
  "presets": [
    "myPreset",
    "babel-preset-myPreset" // equivalent
1.4 配置

babel.config.json 的文件（需要 v7.8.0 或更高版本）

如果你使用的是 Babel 的旧版本，则文件名为 babel.config.js或者.babelrc
"presets": [
  "@babel/env",
      "targets": {
        "edge": "17",
        "firefox": "60",
        "chrome": "67",
        "safari": "11.1"
现在，名为 env 的 preset 只会为目标浏览器中没有的功能加载转换插件。语法都已经清楚了，接下来我们看看 polyfills 。
1.5 Polyfill

从 Babel 7.4.0 版本开始，这个软件包已经不建议使用了，建议直接包含 core-js/stable （用于模拟 ECMAScript 的功能）和 regenerator-runtime/runtime （需要使用转译后的生成器函数）
import "core-js/stable";
import "regenerator-runtime/runtime";
@babel/polyfill 模块包含 core-js 和一个自定义的 regenerator runtime 来模拟完整的 ES2015+ 环境。
这意味着你可以使用诸如 Promise 和 WeakMap 之类的新的内置组件、 Array.from 或 Object.assign 之类的静态方法、 Array.prototype.includes 之类的实例方法以及生成器函数（generator functions）（前提是你使用了 regenerator 插件）。为了添加这些功能，polyfill 将添加到全局范围（global scope）和类似 String 这样的原生原型（native prototypes）中。
对于软件库/工具的作者来说，这可能太多了。如果你不需要类似 Array.prototype.includes 的实例方法，可以使用 transform runtime 插件而不是对全局范围（global scope）造成污染的 @babel/polyfill。
更进一步，如你确切地指导你所需要的 polyfills 功能，你可以直接从 core-js 获取它们。
由于我们构建的是一个应用程序，因此我们只需安装 @babel/polyfill 即可：
npm install --save @babel/polyfill
注意，使用 --save 参数而不是 --save-dev，因为这是一个需要在你的源码之前运行的 polyfill。
幸运的是，我们所使用的 env preset 提供了一个 “useBuiltIns” 参数，当此参数设置为 “usage” 时，就会加载上面所提到的最后一个优化措施，也就是只包含你所需要的 polyfill。使用此新参数后，修改配置如下：
  "presets": [
      "@babel/env",
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1",
        "useBuiltIns": "usage",
Babel 将检查你的所有代码，以便查找目标环境中缺失的功能，然后只把必须的 polyfill 包含进来。示例代码如下：
将被转换为（由于 Edge 17 没有 Promise.prototype.finally）：
require("core-js/modules/es.promise.finally");
Promise.resolve().finally();
如果我们不使用 env preset 的 “useBuiltIns” 参数（即设置为 “usage”），那么我们必须在所有代码之前通过 require 加载一次完整的 polyfill。
1.6 总结

我们可以使用 @babel/cli 从终端运行 Babel，利用 @babel/polyfill 来模拟所有新的 JavaScript 功能，而 env preset 只对我们所使用的并且目标浏览器中缺失的功能进行代码转换和加载 polyfill。
				一、Babel的介绍
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行执行。
这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。
Babel提供babel-cli工具，用于命令行转码。它的安装命令如下：
npm install --global babel-cli
#查看是否安装成功
babel --version
三、Babel的使用
1、初始化项目
npm init -y
2、创建文件
在当前目录下创建src/es6.js
				一、Babel 简介
它是一个 JavaScript 编译器，它是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中下面举个简单例子
转换前，代码里使用ES6箭头函数以及使用const声明常量
  const fn = (num) => num + 2;
转换后，箭头函数变成ES5的普通函数，const也转换成var了，这样就可以在不支持箭头函数的浏览器里运行了
 var fn = 
				      这几天看了一些网上的前端面经，在提到es6的时候会带着问babel如何配置等问题，今天早上花了1个小时时间去了解并实际操作了一个案例，在这里记录一下所做的工作以便以后复习用。
babel是一个广泛使用的转码器，可以将ES6代码转化为ES5代码，从而在现有环境执行，这意味着，你可以现在就用ES6编写程序，而不用担心现有环境是否支持。
安装及配置
首先在自己的电脑里创建一个文...
				Babel基础入门说明一、入门系列（1）概述（2）demo1、初始化package文件2、安装babel命令行工具3、安装babel转译器4、配置.babelrc文件5、创建要转译的js文件6、开始编译
更新时间:2022-02-03
本文主要基于babel官网进行学习，同时综合了网上的很多相关教程，本文会持续更新，不断地扩充
本文仅为记录学习轨迹，如有侵权,联系删除
注意：学习本文之前建议先具备有ES6与js相关知识，本文主要基于babel官网进行学习，地址：https://www.babeljs.
				Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
这意味着，你可以现在就用ES6编写程序，而不用担心现有环境是否支持。下面是一个例子。
// 转码前
input.map(item => item + 1); 
// 转码后
input.map(function (item) { return item + 1...
				半月前，我使用@vue/cli 3.x版本搭建项目，引入一个包后，然后编译卡住不动，报这个错，因为当时刚好练习嵌套路由，以为是啥 module 和 router模块起冲突，按它提示安装了core-js@3,编译还是报错，卸了该版本，又装了core-js@2，编译还是有这个警告提示！ 然后我直接把代码回退一个版本，提示依旧，编译后代码能正常正常跑起来，就没管他了。
这几天我在学习webpack4.x...