vscode中使用npm安装babel的方法

前言

上篇介绍了nodejs的安装配置，这篇来介绍一下在VScode里面怎么使用bable。
bable是一个广泛使用的ES6转换器，可以将ES6代码转为ES5代码

一、检查是否已经安装了npm

在cmd中输入npm -v 得到版本号，现在新版的nodejs在安装的时候已经自动安装了npm。

还是那句话，最好还是以管理员身份打开终端。

二、配置bable

在终端中安装bable，输入 npm install –g babel-cli

这是为了让VScode可以识别bable，安装成功后就是这样：

这个过程超级慢，耐心等待。

三、在VScode中进行配置

1.使用vscode ctrl+j 打开vscode自带终端
2.进入目标文件夹【使用cd命令】

其实上面第二步配置bable也应该在VScode的终端进行的，但是当时我试了好几次都失败然后我就索性在外面的终端配置了。

3.在终端中输入npm init –y 对项目进行初始化
正确结果是bable文件夹下会出现一个package.json文件

4.安装bable
在终端输入npm install -–save-dev babel-preset-es2015 babel-cli

这个过程也挺漫长。

因为我们已经装了淘宝镜像了，所以也可以用cnmp因为nmp可能会失败，但是有可能会遇到这种情况：

我用cnmp -v查询版本号做一个示范

vscode终端执行cnmp出错了，这个时候只需在终端中执行：set-ExecutionPolicy RemoteSigned即可

现在就可以正常使用cnmp了。
代码如下（示例）：

5.新建一个.babelrc文件，配置文件内容

{
    // presets 属性告诉bable要转换的源码使用了哪些新的语法特性
    // 将js转换成es2015
    "presets":["es2015"],
    // 该属性告诉bable要是用哪些插件
    // 这些插件可以控制如何转换代码
    "plugins": []
}

6.文件转换
新建一个js文件，随便输入点内容(用es6的格式)，然后在终端进行转换
babel src/index.js –o dist/index.js
这里我用test.js->demo.js做一个小示范

输入命令后，文件夹内就自动生成了一个转换后的demo.js文件，里面的内容是将test.js里面的es6代码转换为es5

这个语句是用来进行单个文件的转换，同样的，还有直接转化整个文件夹内所有js文件的：

babel src –d dis	//src-源文件夹 dis-转换后的文件夹

还有可以实现实时转换的语句

babel src/index.js –w –o dist/index.js
babel src –w –d dist

到此这篇关于vscode中使用npm安装babel的文章就介绍到这了,更多相关vscode安装babel内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 细说webpack6 Babel的使用详解

    在 webpack 中编写 JavaScript 代码,可以使用最新的 ES 语法,而最终打包的时候,webpack 会借助 Babel 将 ES6+语法转换成在目标浏览器可执行 ES5 语法.所以 Babel 是一个重要的知识点需要掌握. 什么是 Babel Babel 是 JavaScript 的编译器,通过 Babel 可以将我们写的最新 ES 语法的代码轻松转换成任意版本的 JavaScript 语法.随着浏览器逐步支持 ES 标准,我们不需要改变代码,只需要修改 Babel 配置即可以

  • 详解webpack运行Babel教程

    摘要:Babel是转码器,webpack是打包工具,它们应该如何一起使用呢? GitHub仓库: Fundebug/webpack-babel-tutorial ES6 + IE10 = 语法错误! test.js使用了ES6的 箭头函数 : setTimeout(() => { console.log("Hello, Fundebug!"); }, 100) 由于低版本的浏览器没有支持ES6语法,这就意味着代码会出错.例如,在IE 10浏览器中,会出现"语法错误&qu

  • ES6中的class是如何实现的(附Babel编译的ES5代码详解)

    序言 这篇文章主要讲解面试中的一个问题 - ES6中的class语法的实现? ECMAScript 6 实现了class,class是一个语法糖,使得js的编码更清晰.更人性化.风格更接近面向对象的感觉:也使 IDE .编译期类型检查器.代码风格检查器等工具更方便地检测代码语法,做静态分析.同样的,这给没有类就缺点什么的软件开发工程师一个更低的门槛去接触js. ES6 class 的 ES5 代码实现 JavaScript语言的传统方法是通过构造函数定义并生成新对象,这种写法和传统的面向对象语言

  • vue-cli脚手架的.babelrc文件用法说明

    虽然es6还没被浏览器全部支持,但是使用es6是大势所趋,所以babel应运而生将es6代码转换成浏览器能够识别的代码 什么是.babelrc文件呢? 熟悉linux的同学一定知道,rc结尾的文件通常代表运行时自动加载的文件,配置等等,类似bashrc,zshrc 这个文件是用来设置转码的规则和插件 vue-cli脚手架的.babelrc文件 { // 此项指明,转码的规则 "presets": [ // env项是借助插件babel-preset-env,下面这个配置说的是babel

  • Babel 入门教程学习笔记

    Babel 入门教程学习笔记

    Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行. 这意味着,你可以现在就用 ES6 编写程序,而不用担心现有环境是否支持.下面是一个例子. // 转码前 input.map(item => item + 1); // 转码后 input.map(function (item) { return item + 1; }); 上面的原始代码用了箭头函数,这个特性还没有得到广泛支持,Babel将其转为普通函数,就能在现有的JavaScript环境执行了. 一.配置

  • vscode中使用npm安装babel的方法

    vscode中使用npm安装babel的方法

    前言 上篇介绍了nodejs的安装配置,这篇来介绍一下在VScode里面怎么使用bable. bable是一个广泛使用的ES6转换器,可以将ES6代码转为ES5代码 一.检查是否已经安装了npm 在cmd中输入npm -v 得到版本号,现在新版的nodejs在安装的时候已经自动安装了npm. 还是那句话,最好还是以管理员身份打开终端. 二.配置bable 在终端中安装bable,输入 npm install –g babel-cli 这是为了让VScode可以识别bable,安装成功后就是这样:

  • 详解node.js中的npm和webpack配置方法

    详解node.js中的npm和webpack配置方法

    概述 Node.js用c++语言编写而成的,是一个基于chrome V8引擎的javascript运行环境,让javaScript的运行脱离浏览器服务端,可以使用javaScript语言书写服务器端代码 1.使用node来实现一个http服务器 下面创建了一个端口为8787的服务器.他与php,java等不同,像php本地还要基于阿帕奇服务器,node.js能用代码快速搭建一个服务器. // 引入http模块 var http = require("http"); // 调用http的

  • linux中Jetty的安装和配置方法

    linux中Jetty的安装和配置方法

    Jetty Jetty 是一个开源的servlet容器,它为基于Java的web内容,例如JSP和servlet提供运行环境.Jetty是使用Java语言编写的,它的API以一组JAR包的形式发布.开发人员可以将Jetty容器实例化成一个对象,可以迅速为一些独立运行(stand-alone)的Java应用提供网络和web连接.(Jetty是一个开源的软件,可以作为HTTP服务,javax.servlet的容器.) 配置jetty server的步骤: 创建server 配置connector 配

  • 在VScode中创建你的代码模板的方法

    使用VScode的用户代码片段功能,来生成自己习惯的代码模板,提升开发效率 1.选择菜单里的 文件 > 首选项 > 用户代码片段 2.选择你需要自定义模板的文件,以vue为例 3. 配置对应文件json 把代码片段写在json里.每个代码段都是在一个代码片段名称下定义的,并且有prefix.body和description.prefix是用来触发代码片段的.使用 $1,$2 等指定光标位置,这些数字指定了光标跳转的顺序,$0表示最终光标位置. { "vue-template"

  • Vscode中快速创建自定义代码模板的方法

    Vscode中快速创建自定义代码模板 一招鲜,吃遍天,学会了这个在Vscode中快速创建自定义代码模板的教程,我相信创建其它代码模板的方法你也就通个七七八八了. 我就以Vue的创建为例,不过我这个Vue是在HTML中创建的. 初学Vue,我们一般都是在.html文件中引入vue包,然后编写自己的vue代码. 盲目的跟着网上那些教程创建Vue模板是行不通的. 因为我们创建的模板是在.html文件下,所以我们的模板也得是在html.json中来进行编写. 教程如下: 图文并用,理解更清晰到位! 在V

  • 在vscode 中设置 vue模板内容的方法

    vscode中设置 vue 模板内容缘由设置要求1:vscode 先下载插件 `vetur`2: 菜单栏 -文件 - 首选项 - 用户代码片段3:使用 缘由 由于每次在 vscode 中创建vue的文件的时候,都需要手动书写 templete,模板 script,脚本 style,样式 这些重复和繁琐的事情,是可以定义一个模板信息的 设置要求 1:vscode 先下载插件 vetur 2: 菜单栏 -文件 - 首选项 - 用户代码片段 以下是借鉴一下谷粒商城的 提供 vue 模板信息 和 htt

  • MySQL中查看数据库安装路径的方法

    MySQL中查看数据库安装路径的方法

    我们可以通过mysql命令查看mysql的安装路径: # 以下两个sql任意一个可查询 select @@basedir as basePath from dual ; show variables like '%basedir%'; 上面可以看到基础的安装路径,查看数据库data的路径怎么看,很简单,把上面的参数变量换成datadir即可: # 以下查询任意一个均可 select @@datadir as dataPath from dual ; show variables Like '%d

  • 一分钟带你掌握Python中pip的安装与使用方法

    一分钟带你掌握Python中pip的安装与使用方法

    目录 一.简单介绍 二.下载安装 三.最常用命令 1.显示版本和路径 2.获取帮助 3.升级 pip 4.安装包 5.升级包 6.卸载包 7.搜索包 8.显示安装包信息 9.列出已安装的包 10.查看指定包的详细信息 一.简单介绍 pip 是 Python 包管理工具,该工具提供了对Python 包的查找.下载.安装和卸载的功能,现在大家用到的所有包不是自带的就是通过pip安装的.Python 2.7.9 + 或 Python 3.4+ 以上版本都自带 pip 工具.给出pip官网链接:pip官

  • vscode中vue-cli项目es-lint的配置方法

    本文主要介绍vscode中 vue项目es-lint的配置,有任何错误的地方欢迎大佬指出 开始 安装插件 如图所示: vscode设置 安装完成之后,到vscode中的 文件-->首选项-->设置 中 添加如下代码 "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", "javascriptreact", "html",

  • 在vscode中统一vue编码风格的方法

    vetur 很多人知道,但在 vscode 下没办法格式化 .vue 里的 html, js 很是头疼,代码风格无法统一. 所以不少人直接拆分开,然后在 .vue 中引入,虽然方法很好,但这有违 .vue 单文件组件的初衷. 本文详细介绍 vscode 下使用 vetur + prettier + eslint 来统一 vue 编码风格. vetur 插件 vetur 经过多个版本迭代,算是目前 vscode 下最好用的 vue 插件了,甚至支持 ts, webpack alias 等特性. 但

随机推荐