前言

我习惯通过阅读官方文档，提出自己的猜想，再实践官方实例验证猜想，最后再结合现代框架及工程化工具的应用来学习babel的使用和运行原理，以此期望能对babel有更全面的认识。本文是对学习过程的整理和记录。

本文以：

官方提供的实例为切入点，通过逐步安装babel相关包并查看实例编译结果，https和http的区别来认识和学习babel。
Vue.js为切入点，逐步配置一个简单的Vue项目，明确babel与applicationVue数组c语言.js、we女配满眼都是钱bpack在代码编译时的关系。

使用到的包及版本：

babel:7
babel-loader: 8
vue: 2
vue-cli：4
vue-loader: 15
vue-template-compiler: 2
w源码ebpack: 5
webpack-cli: 4.9

babel官方定义APP

Babel 是一个 JavaScrihttp://www.baidu.compt 编译器

是application一个工具链，主要用于将源码精灵永久兑换码采用 ECMAScript 2015+ 语法编写的代码转换http 302为向后兼容的 JavaScript 语法，以便能够数组c语言运行在当前和旧版本的浏览器或其他环境中。

实例探究

在官网使用指南的概述中，提到需要安装的包。下面我源码之家们就来实践下。

首先，我们先通过npm init创建一个项目，使该项目可以下载安装npm平台上的包。

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

以上是官网给出的安装命令，我们http 500先了解这三个库是什么作用。

@babel/core

@babel/core看名字指的是babel的核心包，可以猜想，这个包应该是处理代码的解析，转译，产生。我们来看看@babel/core的pack数组c语言age.json文件来验证我们的猜想。

果不其然，确实是核心的功能。

官网在对其介绍时，首先提到了该包的transform方法，我们猜想，这个方法就是用来把源码转译为能够运行在当前和旧版本的浏览器或其他环境中。

所以至少应该把箭头函数转译为函数声明function吧。

我们来验证下：

npm install --save-dev @babel/core

  "devDependencies": {
    "@babel/core": "^7.16.5"
  }

执行安装命令后，package.json中新增了对应的包。

我们新建文件testBabel源码时代Core.js：

var babel = require("@babel/core");
var sourceCode = `[1, 2, 3].map(n => n + 1)`;
var options = {};
babel.transform(sourceCode, options, function(err, result) {
  console.log('sourceCode=========', result.code);
  console.log('result.code=========', result.code);
  console.log(result);
});

执行

执行后发现，代码并没有转换，猜想的不对？

查阅源码1688资料后发现，@babel/core负责解析，转译，产生是没错的，只女配没有求生欲藤萝为枝是具源码交易平台体转译为什么版本的js，是要自定义的。需要安装另外的包源码时代或插件http 500，在options中添加对应参数处理。

这样的设计确实非常棒，可以根据用户需要自定义，非常灵活了。

@babel/preset-env

官方推荐使用此包来定义转译源码网站后的js版本，我们先来实践下看下效果。

安装

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

在options参数中配置上httpclient

var babel = require("@babel/core");
var sourceCode = `[1, 2, 3].map(n => n + 1)`;
var options = {
  presets: [
    '@babel/env'
  ]
};
babel.transform(sourceCode, options, function (err, result) {
  if (err) {
    console.error(err)
    return
  }
  console.log('sourceCode=========', sourceCode);
  console.log('result.code=========', result.code);
  console.log(result);
});

再次执行

结果显示代码已经转换。

@babel/preset-env我认为可以理解为根据女配每天都在为国争光宿主环境版本预设编译生成的代码的版本。比如高版本的现代浏览器已经支持了async/await关键词，编译出的文件就不需要生成Polyfill代码数组了，直接使用async/await关键词就可以了，这样避免冗余的代码增大代码包体积。

指定宿主环境

这里就有疑问了，这个宿主数组排序环境的版本是怎么确http://www.baidu.com定的？上面的配置并没有设置宿主环境版本，它又是怎么在编译阶段就知道宿主环境的呢？是有默认配置吗？默认配置又是什么呢？

我们在@babel/preset-env的H女配没有求生欲藤萝为枝ow Does it Work?里找到答案。

其实babel是运用的browserslist来设置默认宿主环境版本的。

在bro数组c语言wserslist的Queries提到了宿主环境版本获取方女配没有求生欲藤萝为枝法，其中第5条是默认版本：

If the above methods did not produce a valid result Browserslist will use defaults:> 0.5%, last 2 versions, Firefox ESR, not dead.

我们可以在项目根目录加一个数组c语言.browserslistrc文件

> 0.5%, last 2 versions, Firefox ESR, not dead

然后在代码中参数添加debug参数，方便查看信息

var options = {
  presets: [
    [
      '@babel/env',
      { 'debug': true }
    ]
  ]
};

再运行

Using targets很清楚的显示，我们.女配美炸天browserslistrc文件里配置的各浏览器宿主环境默认的版本是什么。

而且我们女配每天都在为国争光可以源码编程器看到里面有个pluhttp代理gin是transform-arrow-functions { ie }，这里表示如果宿主环境中包含IE浏览器，就需要对箭头函数进行转译。plugin后面我们再做说明。

如果想编译出APP指定某个宿主环境的代码，除了在可以在.browserslistrc文件里配置，还可以设置参数里apple的targets配置。

var options = {
  presets: [
    [
      '@babel/env',
      { 'targets': {"chrome": "47"}, debug: true }
    ]
  ]
};

执行结果如下：

我们发现，这里显示宿主环境只有chrome：47了，而且用到的转译plugin也少了很多，transform-arrow-funappearancections也没有用数组和链表的区别到，因为chrome：47是支持箭头函数的，所以无需转译。

具体哪些语句在哪些宿主环境需要转译，可以查看这个表

如果chrome版本改为46，箭头函数就转译为函数声明function了。

更多配置，比如node版本的配置，可以查阅官网了。

如果不想用preset-env预设，也可以自定义预设版本，无非就是装相应包和配置参数，这里不再赘述。

@babel/cli

@babel/core和 @babel/preset-env已经满足我转译代码的需求，但是之前需要转译的源代码是一行就可以写数组公式完的，如果我要转译成千上万行的代码呢？

再者，我期望的是写完一个源代数组排序码文件，执行一个源码精灵永久兑换码命令，直接生成一个转译好的目标文件，而不是打印一个长长的字符串。

@babel/cli 很好的满足了以上需求。

我们先安装

npm install --save-dev @babel/cli

注意：@babel/cli是依赖于@女配美炸天babel/core和@babel/preset-env的，所以这两个包也必须安装。

新建testBabelCli.js文件，只需要键入一行代码

然后执行下面命令：

npx babel ./src/testBabelCli.js --out-file ./src/testBabelCli-compiled.js --presets=@babel/preset-env

就会在源代码的同级目录下生成转译后的目难破mg5标文件。

也许你会说，在执行转译的命令里加参数太麻烦，是否可以创建个配置文件？

当然可以。@babel/cli支持创建babel.config.js配置文件，执行http 500babel命令时可以自动读取该文件里的配置信息。

在项目根目录下新增文件b女配没有求生欲txt宝书网abel.config.js

module.exports = {
  presets: [
    '@babel/preset-env'
  ]
}

然后执行指令

npx babel ./src/testBabelCli.js --out-file ./src/testBabelCli-compiled.js

转译后生成的文件内容与在命令行里添加参数的男配每天都在体内成绩方式生成的内容是一致的。这里需要提一下.babelrc配置文件。从babel7开始babel.co数组去重nfig.源码交易平台js相当于全局性配置文appear件，.babelrc相当于模块的配置文件。

Plugins

babel里面还有Plugins这个概念，可以更灵活的配置js转译规则，从而扩展代码的转译功能。

说到这里，大家可能会疑女配美炸天惑，presets和Plugins的关系是啥？都是转源码时代译代码，为啥要整两个？

其实，presets是Plugin的集合。

我们来看下，@babel/presets-env的package.json。

显而易见，@babel/presets-env是由一堆appetiteplugin组成的。

不得不说，babel的架构设计的确高明：功能粒度尽可能细，保证了babel的高灵活度，强扩展性。

这里需要源码精灵永久兑换码格外注意approach一点，引入presets和plugins的执行顺序是不同的，这里可以看官网的Plugin Ordering

Plugin实现原理

之前已经提到，babel进行代码转换的核心步骤是三个：解析（parser），转译（t源码精灵永久兑换码raverse），产生（generator）。

Plugin就是在 转译（traverse） 这一步对代码做处理的。

首先，我数组去重们需要根据源代码，获取到AST，https和http的区别可以在AST ex源码精灵永久兑换码plor女配每天都在为国争光er这个网站在线生成AShttp://192.168.1.1登录T，然后再编辑处appear理这个AST就可以啦。

对js中新增内置函数的转译

官方实例里，并没有提到这个插件，但是在实践中，这个插件确实也是必数组排序不可少的。下面我们就来一步步探究下。

首先，在testBabelCli.js文件中，把代码改为以下

然后我们在babel.config.js中把宿主环境设置为IE8。

这两行代码中，包含const关键词和includes数组方法appearance，这些都是E数组c语言S6的新增的语法和API，IE8不支持，理论上这两个方法都应该被转译。

执行一下命令

npx babel ./src/testBabelCli.js --out-file ./src/testBabelCli-compiled.js

查看编译后文件testBabelCli-compil源码1688ed.js

发现const被转译了女配没有求生欲txt，但是incluhttp代理des方法并没有转译，这样运行在IE8上肯定会报错。

我们看下控制台输出

transform-block-approvescoping就是处理const的插件，这个在@babel/preset-env里默认包含的。但是像includes这样的API默认是没有处理它的包的。

@babel/polyfill

对于向includes这样比较httpclient新的js内置函数可以通过appearance引入@babel/polyfi数组公式ll进行转译。

@babel/polyfill包含regenerator runtime和 core-js.

core-js是对ES6+的新特性API提供polyfill的库，以适配低版本浏览器。

而需要regenerator runtihttp代理me是因为，babel对async/await、yield这样的生成器代码转译为在执行时需要调用regeneratorR女配每天都在抱大腿我要成仙untime方法，这个方法就定义在regenerator runtappstoreime中，其实就是babel对regenerator runtime对依赖引用女配没有求生欲txt宝书网。

我们来验证下，把testBabelCli.js内容改为

执行命令

npx babel ./src/testBabelCli.js --out-file ./src/testBabelCli-compiled.js

查看编译后文件testBabelCli-compiled.js

确实有调用。

配置文件babel.config.js里新增配置项

useBuiltIns是设置polyfill引入的方式，NPMusage是按需引入，entry是全部引入。显然，usage使用更合理一些。

执行命令

npx babel ./src/testBabelCli.js --out-file ./src/testBabelCli-compiled.js

查看编译后文件testBabelCli-compiled.js

显示全局引入了core-jNPMs/m源码1688odules/es7.array.includes.js

然后我们安装@babel/polyfill。

npm install --save @babel/polyfill

注意这里是安装在dependency里的，下面是官方提示原文：

Because this is a polyfill (which will run before your source code), we need it to b数组初始化e adependency,数组的定义 not adevD源码编辑器ependency

@babel/plugin-transform-runtime

解决全局变量污染问难破mg5日剧题

不知你发现女配没有求生欲txt没有，上面对es7.a源码编辑器下载rray.includes.js的引入是全局方式的引入，就像官网上对@babel/polyfill的描述：

Thappointmentis means you can use new built-ins likePromiseorWeakMap, static methods lappearanceikeArray.fromorObject.assign, instHTTPance methods likeArray.prototype.includes, and generato源码中的图片r functions (proappetitevided you use theregeneratorplugin). The polyfill adds to the global scope as well as native prototy女配没有求生欲藤萝为枝pes likeStringin order to do this.

直接在对象构造函数或是原型上添加方法，会出现污染全局变量的风险。因为你无法保证你引用的第三方库里也修改源码1688了同一个全局变量，就会出现问题了。

@babel/plugin-transform-runtime可以解决这个问题。

正如官网中的描述

Another purpose of this transformer is to create a sandboxed environment for your code. If you dirAPPectly importcore-jsor@babel/polyfilland the built-ins it provides such asPromiseappetite,SetandMap, tho数组c语言se will pollute the glob源码精灵永久兑换码al scope. While this might be ok for an app or a commahttp协议nd line tool, it becomes a problem if your code is a library whichappear you intend to publish for others to use o女配没有求生欲txt宝书网r if you can’t exactly c源码编辑器ontrol the environmentapplication in which your code willhttp代理 run.

下面再来验数组去重方法证下，安装相关包：

npm install --save-dev @babel/plugin-transform-runtime

对babel.config.js添源码中的图片加配置信息

执行命令

npx babel ./src/testBabelCli.js --out-file ./src/testBabelCli-compiled.js

查看编译后文件testBabelCli-compiled.js

这里显示要引入包@babel/runtime-corejs3，获取到方法_interappleopRequireDefault

安装

npm install --save @babel/runtime-corejs3

这个包是代码运行时用到的，所以也是要安装在dependency难破mg5里的。

安装后，我们找到这个方法，看看干源码之家了啥

就是判断参数是不是ESM，如果是直接返回；如果不是，把参数放在一个对象的default属性里返回，其实就是为APP了模块化代码。

解决辅助代码重复声明问题

@babel/plugin-transform-runtime还有一个作用：可以解决编译后的辅助代码重复定义的问题。

我们来看下面这个例子：

先把配置文件的@babel/plugin-transform-runtime插件相男配每天都在体内成绩关配置注释掉。

然后，定源码精灵永久兑换码义一个Foo类

执行一下命令

npx babel ./src/testBabelCli.js --out-file ./src/testBabelCli-compiled.js

查看编译后文件testBabelCli-compiled.js

可以发现编译后的代码定义并调用了一数组去重方法个_classCallCheckapprove方法。

下面我们在babel.config.js中加上@babel/plugin-transform-runtime插件配置。

再执行命令

npx babel ./src/testBabelCli.js --out-file ./src/testBabelCli-compiled.js

查看编译后文件testBabelCli-compiled.js

可以发现，_classCallCheck2这个方法是定义在@babel/runtime-corejs3中的。编译后的代码直接引用调用就可数组去重以，不需数组公式要再定义了。难破mg5日剧

小结

@ba女配满眼都是钱bel/core是babel的核心包，负责js代码的解析（parser），转译（traverse），产生（generator）。

但是具体转译为什么版本的js，还需要再引入包进行定义。官方推荐使用@babel/源码编程器preset-env进行定义，当然你也可以按自己的需要进行定义。

为了项目工程化的需要，官方还提供了@babel/cli，可以直接将源代码文件进行编译，直接生成目标文件。

为了babappreciateel有数组更好的扩展性，也为了更灵活的实现代码编appreciate译，babel提供了Plugin功能，可以让用户自己实现符合自己需求的编译规则。babel所有的转译规则都是以plugin为基础的，prese数组去重ts也是Plugin的集合。

对于js中新增的内置API的转译，需要另外安装@babel/polyfill进行转译，这个包包含core-js和regappleenerator runtime，一个是对低版本浏览器提供ES6+的新特性的实现方法，一个是定义生成器函数函数被babel转译后，要调用的方法，因为都是在代码执行时用到的，所以要安装在dependencies中。

但是使用@babel/polyfill会有两个问题，一个是因为polyfill方法是定义在全局变量上的，会污染全局环境；再一个，编译过后的辅助代码，会出现重复定义的问题。为了解决这些问题，可以apple使用@babel/plugin-trhttp://www.baidu.comansform-runtappstoreime插件解决。

探究babel对Vue代码的转译

目前的项目开发，我源码网站们都源码编程器使用现代源码交易平台框架，我们可以根据框架提供的模板进行快数组速开发。可application是模板代码浏览器并不认识，最approve终还是要转为浏览器认识的代码，babel正好是做js代码转译工作的，下面就appointment以Vue框架为例，探究下，babel是怎么转译Vue代码的。apple

尝试babel直接转译Vue代码

安装Vue.js

npm install vue --save

新建index.html文女配每天都在抱大腿我要成仙件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

新建index.js文件

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
  el: '#app',
  render: (h) => h(App),
  components: { App }
})

新建App.vue文APP件

<template>
  <div id="app">
     <h1>My Vue App!</h1>
  </div>
</template>

执行babel编译命令：

npx babel ./src/vue-demo/index.js --out-file ./src/vue-demo/dist/index.js

执行命令后生成了编译后的文件/dist/index.js

"use strict";
var _vue = _interopRequireDefault(require("vue"));
var _App = _interopRequireDefault(require("./App"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
_vue["default"].config.productionTip = false;
new _vue["default"]({
  el: '#app',
  render: function render(h) {
    return h(_App["default"]);
  },
  components: {
    App: _App["default"]
  }
});

把/dist/index.js文件引入index.html中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script src="https://juejin.im/post/dist/index.js"></script>
</body>
</html>

然后我们把ht源码之家ml文件在浏览器中打开，发现控制台报错

浏览器并不认识引入文件的requir数组去重方法e方法，babel把import转为require方法这样的CommonJS规范形式就结束了。

为了解决require方法为定义问题，从而实现文件间引入，我们可以使用webpacappearancek。

通过webpack解决require未定义问题

安装webpack

npm install --save-dev webpack webpack-cli

根目录下新建文件webpack.config.js

const path = require('path')
module.exports = {
  entry: './src/vue-demo/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'build.js'
  }
}

在package.json中的script中添加

"scripts": {
  "build": "webpack --mode development",
},

执行命令

npm run build

报错。。。。

这里错误提示的很明显，就是webpack不认识.vue类型文件，需要一个loader做转译，转换为js模块。

我们来装一个vue-loader

npm install --save-dev vue-loader

在男配每天都在体内成绩webpack.config.js中配置难破mg5引入vue-loadhttpclienter

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
  entry: './src/vue-demo/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'build.js'
  },
  // vue-loader 版本15以上时必须加这个插件
  plugins: [
    new VueLoaderPlugin()
  ],
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
}

再次执行命令npm run build，又报错了。。appointment。。

这里错女配没有求生欲txt误提示也很明确，是要求添加vue-template-compiler模块，这个模源码时代块的作用是将 Vue 2.0模板预编译为渲染函数（template => ast =&ghttp代理t; render），以避免运行时编译开销和 CSP 限制。

安装女配美炸天

npm install vue-template-compiler --save-dev

再次执行npm run build，成功！

把打包好的dist文件夹下的build.j源码中的图片s文件，写入index.html文件中，再在浏览器中打开index.html文件

完美！

等等，回头看下webpack配置文件，好像并没有配置babel相关的loader呀，只是用vue-loader就把在vue框架里的代码编写好了，那么是不需要babel？还是说我们的例子太简单，没有涉及到相关功能的使用呢appearance？

我们继续做实验

在App.vue里加段js数组公式代码

<template>
  <div id="app">
    <h1>My Vue App!</h1>
  </div>
</template>
<script>
export default {
  created () {
    this.init()
  },
  methods: {
    init () {
      [1, 2, 3].map(n => n + 1);
      console.log('init method')
    }
  }
}
</script>

我们执行一下npm run build，查看编译之后的文件。

发现这段代码没有变化，而且这条语句所在的creat源码1688ed方法，也都是用ES6语法定义的，之所以也能在浏览器里正常执行文httpwatch件，因为我的浏览器版本高，可以识别这些语法。

然后approve我们安装babel-loader

npm install --save-dev babel-loader

再把babel-数组和链表的区别loader配置到webpack.c数组c语言onfig.js中。

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
  entry: './src/vue-demo/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'build.js'
  },
  plugins: [
    new VueLoaderPlugin()
  ],
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /.js$/,
        loader: 'babel-loader'
      },
    ]
  },
}

然后再执行npm run build，查看输出

看！之前提到的代码都进行了转译。

vue-cli4是如何转译代码的呢？

我们在vue-cli4的官方文档里，浏览器兼容性这一个章节里，可以了解到vue-cli使用babel的所有信息。这里也指出源码编辑器下载了使用babel的目的，就是为了解决浏览器兼appointment容性。

我们还是先从vue-cli生成的实际项目中开始探究。

安装步骤这里省略了，我们直接看通过vue-cli生成的实际项目的package.json文件。

我们apple发现了在devDeapplicationpendencies文件中的@vue/cli-pluhttp 500gin-b数组公式abel这个插件。我们先看官网对这个插件的介绍：

Uses Babel 7 +b女配每天都在抱大腿我要成仙abehttp://192.168.1.1登录l-loader+@vuapplicatione/babel-pre源码1688set-appby default, but can be configured viababel.config.jsto use any other Babel presets or plugins.

这里源码中的图片可以看出，这个插件http://192.168.1.1登录集合了Bahttps和http的区别bel 7、babel-loader和@vue/babel-preset-app（单从名字看），approach是用来环境预设的，后面我们再细看。

先来看下@vue/cli-plugin-babel的package.json文件，看都依赖了什么。

里面包含babel主要的包和配合webpack使用的babel-loader。

下面我们再appstore来看看@vue/babel-preset-app作用是什么。

Thishttpclient is the defaulappointmentt BabelNPM preset used in all Vue CLI projects.Note: this preset is meant to be u女配每天都在抱大腿我要成仙sed exclusively in projects created via Vue CLI and does not consider external use cas难破mg5es.

其实就是vue-cli的源码1688默认预设选项。

再看看它的package.jso数组去重方法n文件。

在里面我们可以发现，有babel的很多关键包和插件，我们之前也有介绍过了。除此之外，还有一些@vue/bhttpwatchabel-preset-ap源码精灵永久兑换码p引入的默认插件和辅助方法，这里不再一一介绍，可以看下官方文档。

小结

探究如何把Vue项目代码编译为浏览器可识别的代码时发现，babel只能把import语句转为require语句，这个语句浏览器也不识别。所以需要借助webpack对re数组c语言quire模块引入问题再次处理。

但是，webpack在处理模块引入时，又回遇到问题：它不认识.vue模板文件，需要再引入vue-loader把模板文件转译为js模块。

但是vue-loader只能把模板专为ES6版本的js模块，所以要添加babel-loader再对js文件中的代码进行向下兼容的转译。

vue-cli中的@vue/cli-plugin-babel插件是女配每天都在为国争光对babel功能做了封装，里面包含Babel 7、babel-loader和@vue/babel-preset-app，实现了vue、babel和webpack的集成。

vue-cli还引入了默认插件proposal-dynamic-import、@babel/pluappstoregin-proposal-class-pro女配美炸天perties、@babel/plugin-prapproveoposal-decorators等语法转译插件和@babel/plugin-syntax-jsx、 @vue/babel-preset-jsx等vue jsx的语法转源码译插件。

vue-cli也使用了@babel/pluginappreciate-transfo女配没有求生欲藤萝为枝rm-runtime插件来优化编译结果。

总结

经过以上实践得以验证Babel 是一个 JavaScript 编译器的官方定义。是以Plugin为最细粒度源码交易平台的模块，组合成的对js代码进行转译的规则方案。最直接的目的就是为了代码兼容宿主环境。

但是它只是单个文件的编译，不涉数组和链表的区别及文件间的引入，如果涉及appear多模块文件的引入，就需要运用像webpack这样的工具了。

在Vue这样的现代框架中，首先是需要webpack这样的工具进行代码模块文件管理的，源码与之配套的框架工具包（如：vue-loader）的实现，往往都采用ES6及以上来实现的。这时，就需要安装babe源码编辑器l-l源码编程器oader对生成的js文件进行二次转译，以适配目标宿主环境。

学习探究的过程，难免有疏漏、有错误appointment。欢迎大家批评指教，感谢！

实例探究Babel及Babel与Webpack、Vue之间的关系

前言

babel官方定义APP

实例探究

@babel/core

@babel/preset-env

指定宿主环境

@babel/cli

Plugins

Plugin实现原理

对js中新增内置函数的转译

@babel/polyfill

@babel/plugin-transform-runtime

解决全局变量污染问难破mg5日剧题

解决辅助代码重复声明问题

小结

探究babel对Vue代码的转译

尝试babel直接转译Vue代码

通过webpack解决require未定义问题

vue-cli4是如何转译代码的呢？

小结

总结

作者信息

实例探究Babel及Babel与Webpack、Vue之间的关系

前言

babel官方定义APP

实例探究

@babel/core

@babel/preset-env

指定宿主环境

@babel/cli

Plugins

Plugin实现原理

对js中新增内置函数的转译

@babel/polyfill

@babel/plugin-transform-runtime

解决全局变量污染问难破mg5日剧题

解决辅助代码重复声明问题

小结

探究babel对Vue代码的转译

尝试babel直接转译Vue代码

通过webpack解决require未定义问题

vue-cli4是如何转译代码的呢？

小结

总结

相关文章

2、Springboot-Starter造轮子之自动锁组件（lock-starter）

iOS核心基础与面试题之block

iOS 17.2 Beta 2 发布，有哪些新内容

Flutter和Rust如何优雅的交互、项目终于用上了插入式注解 | 酱酱的下午茶第131期

作者信息