首页 > web前端 > 前端问答 > vue的babel是什么意思

vue的babel是什么意思

青灯夜游
发布: 2021-12-22 17:03:29
原创
7892 人浏览过

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

vue的babel是什么意思

本教程操作环境: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'
登录后复制

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

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

说明:

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

安装命令如下。

    

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

    

【相关推荐:《vue.js教程》】

以上是vue的babel是什么意思的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板