广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >vue中babel指的是什么意思
  • 462
分享到

vue中babel指的是什么意思

vuebabel 2022-10-19 15:10:48 462人浏览 独家记忆
摘要

这篇文章将为大家详细讲解有关Vue中babel指的是什么意思,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 在vue中,Babel是一个jav

这篇文章将为大家详细讲解有关Vue中babel指的是什么意思,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

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

教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。

vue项目中普遍使用es6语法,但有时我们的项目需要兼容低版本浏览器,这时就需要引入babel插件,将es6转成es5。下面我们来了解一下babel是什么。

Babel 是一个 JavaScript 编译器

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

  • 语法转换

  • 通过 Polyfill 方式在目标环境中添加缺失的特性 (通过引入第三方 polyfill 模块,例如 core-js

  • 源码转换(codemods)

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

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

vue中引入babel步骤

1、安装babel-polyfill插件

npm install --save-dev babel-polyfill

2、安装成功后有三种引入方式

第一种:在入口文件中引入,例如:main.js中加入

import 'babel-polyfill'

vue中babel指的是什么意思

第二种:在 webpack.config.js 文件中,entry 入口处,按照如下修改

vue中babel指的是什么意思

第三种:使用cdn的资源,以js的文件加入到html页面:例如:

vue中babel指的是什么意思

说明:

babel插件虽然可以帮我们把es6语法的写法转成es5的写法,但是却不能转换新的api,比如Iterator、Generator、Set、Map、Proxy、Reflect、Symbol、Promise等全局对象都不会转换,如果想让这个方法运行,必须使用babel-polyfill,为当前环境提供一个垫片。

安装命令如下。

    vue中babel指的是什么意思

然后,在脚本头部,加入如下一行代码。

    vue中babel指的是什么意思

关于“vue中babel指的是什么意思”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

--结束END--

本文标题: vue中babel指的是什么意思

本文链接: https://www.lsjlt.com/news/87919.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue中babel指的是什么意思
    这篇文章将为大家详细讲解有关vue中babel指的是什么意思,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 在vue中,Babel是一个Jav...
    99+
    2022-10-19
    vue babel
  • vue中spa指的是什么意思
    这篇文章给大家分享的是有关vue中spa指的是什么意思的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 在vue中,spa全称“single-page ...
    99+
    2022-10-19
    vue spa
  • php中.=指的是什么意思
    这篇文章主要为大家展示了“php中.=指的是什么意思”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“php中.=指的是什么意思”这篇文章吧。php中“.=”表示赋值运算符,是字符串连接的意思,该运...
    99+
    2023-06-25
  • php中=指的是什么意思
    小编给大家分享一下php中=指的是什么意思,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!php中=符号是PHP中的基础赋值运算符,赋值形式如“z=x+y”,这意味...
    99+
    2023-06-21
  • python中+=指的是什么意思
    小编给大家分享一下python中+=指的是什么意思,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!python中+=的意思:1、两个值相加,返回值给符号左侧的变量;...
    99+
    2023-06-06
  • JavaScrip中=指的是什么意思
    小编给大家分享一下JavaScrip中=指的是什么意思,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!JavaScript是什么JavaScript是一种直译式的脚本语言,其解释器被称为JavaScript引擎,是浏览器的一...
    99+
    2023-06-14
  • python中**指的是什么意思
    这篇文章主要介绍python中**指的是什么意思,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!在python中,“**”表示幂运算,只需要在两数之间用上“**”,就表明这两个数字进行乘方运算;其中第一操作数为底数,第...
    99+
    2023-06-14
  • javascript中$指的是什么意思
    小编给大家分享一下javascript中$指的是什么意思,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!javascript中“$”的意思:1、“$”可以用来表示变...
    99+
    2023-06-14
  • python中==指的是什么意思
    小编给大家分享一下python中==指的是什么意思,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!Python的优点有哪些1、简单易用,与C/C++、Java、C# 等传统语言相比,Python对代码格式的要求没有那么严格;...
    99+
    2023-06-14
  • python中@指的是什么意思
    这篇文章主要介绍了python中@指的是什么意思,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。python主要应用领域有哪些1、云计算,典型应用OpenStack。2、WEB...
    99+
    2023-06-14
  • python中 *= 指的是什么意思
    这篇文章将为大家详细讲解有关python中 *= 指的是什么意思,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。python有哪些常用库python常用的库:1.requesuts;2.scrapy;3.p...
    99+
    2023-06-14
  • php中.= 指的是什么意思
    小编给大家分享一下php中.= 指的是什么意思,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!.=在php中是一种赋值运算符,用于连接两个字符串,比如表达式“a ....
    99+
    2023-06-26
  • javascript中$是指什么意思
    小编给大家分享一下javascript中$是指什么意思,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!JavaScript可以做什么1.可以使网页具有交互性,例如响...
    99+
    2023-06-14
  • vue组件化开发指的是什么意思
    小编给大家分享一下vue组件化开发指的是什么意思,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧! 在vue中,组件化开发指的是将复杂的业务拆分为多个组件,每个组件...
    99+
    2022-10-19
    vue
  • JVM指的是什么意思
    这篇文章将为大家详细讲解有关JVM指的是什么意思,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。Java虚拟机(JVM)是可运行Java代码的假想计算机。只要根据JVM规格描述将解释器移植到特定的计算机上,...
    99+
    2023-06-03
  • xps指的是什么意思
    小编给大家分享一下xps指的是什么意思,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!xps是XML Paper Specification即XML文件规格书的简称...
    99+
    2023-06-06
  • chrome指的是什么意思
    这篇文章主要介绍了chrome指的是什么意思,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。chrome是Google公司开发的一款网页浏览器。Chrome在设计术语中的意思是...
    99+
    2023-06-08
  • ide指的是什么意思
    这篇文章将为大家详细讲解有关ide指的是什么意思,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。ide全称“Integrated Development Environment”,中文意思为“集成开发环境”...
    99+
    2023-06-14
  • html指的是什么意思
    这篇文章将为大家详细讲解有关html指的是什么意思,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。html的英文全称是“Hyper Text Markup Language”,表示超文本标记语言,是一种标记...
    99+
    2023-06-14
  • redis指的是什么意思
    这篇文章主要介绍了redis指的是什么意思,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。Redis是一个开源的使用ANSI C语言编写、支持网络...
    99+
    2022-10-18
    redis 指的 edi
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作