码迷,mamicode.com
首页 > 其他好文 > 详细

Babel 及其工作原理

时间:2020-04-17 20:17:20      阅读:82      评论:0      收藏:0      [点我收藏+]

标签:创建   原理   install   htm   目录   --   plugin   html   loader   

一、什么是 Babel

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

// Babel 输入:ES2015 箭头函数
[1,2,3].map((n)=>n+1)

// Babel 输出:ES5 语法实现的同等功能
[1,2,3].map(function(n){
  return n+1
})

 

二、Babel 的工作原理

技术图片

首先把原始代码转成抽象语法树(Abstract Syntax Tree,AST),然后基于这个 AST 做转换,每个转换被处理成插件的形式,最后把 AST 还原成代码。

 

三、安装

这里使用 Webpack

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

安装成功后,要在 webpack.config.js 中进行简单的开启 Babel:

module: {
  rules: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
  ]
}

上面的安装只是开启了 Babel,还没选择使用 plugin,接下来是进行 plugin 的配置:

在项目根目录创建 .babelrc 文件,文件内容如下:

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

(这里使用 presets 而非 plugin 的原因:presets 是 plugin 的集合)

 

Babel 及其工作原理

标签:创建   原理   install   htm   目录   --   plugin   html   loader   

原文地址:https://www.cnblogs.com/Leophen/p/12721955.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!