在webpack中配置babel-loader

最新推荐文章于 2024-08-22 09:57:03 发布

晨曦之光11

最新推荐文章于 2024-08-22 09:57:03 发布

阅读量1.4w

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_21796899/article/details/78817755

版权

本文介绍了如何在 Webpack 中配置 Babel-loader，包括安装 babel-core、babel-preset-*/babel-plugin-* 和 babel-runtime。详细讲述了 babel-core 的 AST 转换原理，babel-preset 的作用，以及 babel-runtime 的优势在于避免重复代码。同时，解释了 babel-polyfill 和 babel-plugin-transform-runtime 的区别，前者全局污染，后者不支持实例方法但不污染全局环境。

摘要由CSDN通过智能技术生成

安装

安装：npm i -D babel-core babel-loader babel-plugin-transform-runtime

安装：npm i -D babel-preset-es2015 babel-preset-stage-0

安装：npm i -S babel-runtime

说明：

babel-core

把 js 代码分析成 ast (抽象语法树, 是源代码的抽象语法结构的树状表现形式)，方便各个插件分析语法进行相应的处理。有些新语法在低版本 js 中是不存在的，如箭头函数，rest 参数，函数默认值等，这种语言层面的不兼容只能通过将代码转为 ast，再通过语法转换器分析其语法后转为低版本 js。

babel-preset-*

babel-plugin-* 代表了一系列的转码插件
有了 babel-plugin 系列，可以按需配置自己想要的特性，若是想搭个 es6 环境，一个个地配置各个插件，我猜你会疯掉。babel-preset 系列就可以满足我们的需求，babel-preset 系列打包了一组插件，类似于餐厅的套餐。如 babel-preset-es2015 打包了 es6 的特性，babel-preset-stage-0 打包处于 strawman 阶段的语法