位置 > 首页 > 图说知识 > 科技

vue babel

vue中如何安装babel?一起了解一下吧!

Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。vue项目中普遍使用es6语法,但有时我们的项目需要兼容低版本浏览器,这时就需要引入babel插件,将es6转成es5。

安装babel的具体步骤如下:

1.先安装node.js

2.安装依赖包

npm install --save-dev @babel/core @babel/cli

如果说提示babel不是命令,可以全局安装npm install --global @babel/core @babel/cli

3.运行babel src -d lib

或者在package.json中配置scripts属性,添加一个属**uild:“babel src -d lib”,运行npm run build

4.想要语法进行转换,得指定从哪种语法转哪种语法,所以需要安装语法转换器插件

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

5.配置babel

创建一个.babelrc的文件,写入

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

6.运行npm run build 或者babel src -d lib

7.转换后的语法就可以在服务器nodejs环境下使用

8.如果想要转换后的代码在服务器和浏览器都能使用,需要安装babel插件@babel/plugintransform-modules-umdnpm install --save-dev @babel/plugin-transform-modules-umd

9.在.babelrc中添加"plugins": ["@babel/plugin-transform-modules-umd"] //在babel进行模块化转换的时候使用这个插件

10.运行npm run build 或者babel src -d lib

22.编译过后就可以在浏览器中或者服务器nodejs环境下使用编译过后的js

浏览器中:需要requirejs

服务器中:需要运行node **.js命令

以上就是小编收集整理出来的,望能够帮助到大家。


本站声明:本站部分文章来自网络,由用户上传分享,如若内容侵犯了您的合法权益,可联系我们进行处理。文章仅供大家学习与参考,不**本站立场。

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

相关图片
相关单图
热门图文标签
热门图片标签
热门词条推荐

精美图文推荐

上一篇 下一篇
作者信息
自愈心暖☻
(0)赞
2022-01-29 00:49:51
相关专辑
返回首页