VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > temp > JavaScript教程 >
  • 02.ElementUI源码学习:babel配置

书接上文,接下来项目将引入babel支持ES6+语法兼容。

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

0x00.babel概念

Babel 是一个编译器(输入源码 => 输出编译后的代码)。编译过程分为三个阶段:解析、转换和打印输出。

Babel 本身不具有任何转化功能,它把转化的功能都分解到一个个plugin 里面。因此当我们不配置任何插件时,经过 babel 的代码和输入是相同的。

插件(Plugins)

插件总共分为两种:语法插件(Syntax Plugins)和转译插件(Transform Plugins)。

  • 转换插件用于转换你的代码。
  • 语法插件只允许Babel解析(parse)特定类型的语法(而不是转换)。

转换插件会自动启用语法插件。因此,如果你已经使用了相应的转换插件,则不需要指定语法插件。
具体插件列表,详见官方文档。 Plugins

预设(Presets)

presets可以看作一组预先设定的插件列表集合,我们可以不必再当独地一个一个地去添加我们需要的插件。

配置文件

babel提供了config的方式,类似于webpack的cli方式以及config方式。官方文档

babel 7.X 之后,引入了babel.config.json (支持.js, .cjs, .mjs等文件格式);在7.X之前,项目都是基于.babelrc(支持.json,.js, .cjs, .mjs等文件格式)来进行配置。

一般babel.config.json会放置在根目录下,在执行编译时,babel会首先去寻找babel.config.json文件,以此来作为整个项目的根配置。

babel.config.json 配置示例

{
  "presets": ["@babel/env"],
  "plugins": ["transform-vue-jsx"]
}

插件的短名称

如果插件名称的前缀为 babel-plugin-,你还可以使用它的短名称:

{
  "plugins": [
    "myPlugin",
    "babel-plugin-myPlugin" // 两个插件实际是同一个
  ]
}

适用于带有冠名(scope)的插件:

{
  "plugins": [
    "@org/babel-plugin-name",
    "@org/name" // 两个插件实际是同一个
  ]
}

预设的短名称

如果 preset 名称的前缀为 babel-preset-,你还可以使用它的短名称:

{
  "presets": [
    "myPreset",
    "babel-preset-myPreset" // equivalent
  ]
}

适用于带有冠名(scope)的 preset:

{
  "presets": [
    "@org/babel-preset-name",
    "@org/name" // equivalent
  ]
}

执行顺序

  • 插件执行顺序在presets之前
  • 插件会按照声明的插件列表顺序顺序执行(first to last)
  • preset会按照声明的列表顺序逆序执行(last to first)

参考
https://www.cnblogs.com/rynxiao/p/13665506.html
https://babeljs.io/docs/en/config-files

0x01.babel安装与配置

安装所需包(package)

项目中引入bable(babel 7.0 以后的插件与预设以@babel为前缀)。

carbon (22).png

@babel/cli 内置的 CLI 命令行工具,可通过命令行编译文件。官方文档
@babel/core babel的核心,包含各个核心的API,供babel插件和打包工具使用。官方文档
@babel/preset-env 是一个常用的预设(Presets), 让你能使用最新的JavaScript语法, 它会帮你转换成代码的目标运行环境支持的语法, 提升你的开发效率并让打包后的代码体积更小。相关参考

webpack loader 模块安装

carbon (25).png

JSX语法模块安装

JSX语法插件使用babel-plugin-syntax-jsx,没有使用高版本的@babel/plugin-syntax-jsx,项目运行中后者会出现 Cannot find module babel-plugin-syntax-jsx 异常。

carbon (26).png

功能验证

上述模块安装完毕后,在test目录下,创建一个名为babel-es6-test.js的文件

carbon (23).png

在命令行窗口输入以下指令,编译整个test文件夹并输出到lib(不存在则自动创建)文件夹中

carbon (24).png

成功运行后,项目lib目录下也会创建一个babel-es6-test.js的文件,跟test目录下的文件是相同的,代码没有进行转换。

Babel 本身不具有任何转化功能,不配置任何插件时,经过 babel 的代码和输入是相同的。

在根目录下创建babel.config.json文件,配置如下:

carbon (27).png

再次运行指令,lib下输出文件代码已经转换

carbon (28).png

项目配置

更新babel.config.json配置

carbon (33).png

webpack.config.js添加一条关于babel-loader的规则:

carbon (35).png

目录examples新增文件JSX.vue用来测试JSX语法

carbon (34).png

更新examples\App.vue文件,引入JSX.vue组件

carbon (36).png

运行npm run dev,打开浏览器,成功解析结果如下

微信截图_20210415105826.png

最新目录结构

carbon (39).png

0x02.示例代码

Github Repo            https://github.com/andurils/code-examples/tree/main/learning-element2/step01

作者:Anduril 

简书传送门:简书/Anduril 

掘金传送门:掘金/Andurils 

个人小站:anduril.cn 

技术只有不沉浸其中才能对其更加公正看待! 没了狂热和浮躁,去体会下开源下的语法魅力!这里没有技术宗教的狂热和鄙夷,没有疯狂的个人崇拜,只是一个技术人探索之路上对于美丽与丑陋的随笔和感悟! 

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。



相关教程