vscode中使用npm安装babel的方法


Posted in Javascript onAugust 02, 2021

前言


bable是一个广泛使用的ES6转换器,可以将ES6代码转为ES5代码

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

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

vscode中使用npm安装babel的方法

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

二、配置bable

在终端中安装bable,输入 npm install ?g babel-cli

vscode中使用npm安装babel的方法

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

vscode中使用npm安装babel的方法

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

三、在VScode中进行配置

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

vscode中使用npm安装babel的方法

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

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

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

vscode中使用npm安装babel的方法

这个过程也挺漫长。

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

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

vscode中使用npm安装babel的方法

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

vscode中使用npm安装babel的方法

现在就可以正常使用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做一个小示范

vscode中使用npm安装babel的方法

输入命令后,文件夹内就自动生成了一个转换后的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内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JAVASCRIPT  THIS详解 面向对象
Mar 25 Javascript
jquery实现心算练习代码
Dec 06 Javascript
仿猪八戒网左下角的文字滚动效果
Oct 28 Javascript
js控制表单不能输入空格的小例子
Nov 20 Javascript
借助javascript代码判断网页是静态还是伪静态
May 05 Javascript
Ajax清除浏览器js、css、图片缓存的方法
Aug 06 Javascript
Javascript基础_嵌入图像的简单实现
Jun 14 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
Jun 14 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
Jan 08 Javascript
探秘vue-rx 2.0(推荐)
Sep 21 Javascript
VScode格式化ESlint方法(最全最好用方法)
Sep 10 Javascript
Javascript confirm多种使用方法解析
Sep 25 Javascript
Element实现动态表格的示例代码
JavaScript分页组件使用方法详解
webpack的移动端适配方案小结
Jul 25 #Javascript
Vue3.0 手写放大镜效果
ElementUI实现el-form表单重置功能按钮
vue项目多环境配置(.env)的实现
Node与Python 双向通信的实现代码
Jul 16 #Javascript
You might like
php中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
PHP中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
基于Discuz security.inc.php代码的深入分析
2013/06/03 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
php写入文件不覆盖的实例讲解
2019/09/17 PHP
使用laravel和ajax实现整个页面无刷新的操作方法
2019/10/03 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
在jQuery ajax中按钮button和submit的区别分析
2012/10/07 Javascript
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
2016/02/14 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
vue-cli webpack配置文件分析
2019/05/20 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
利用JavaScript将Excel转换为JSON示例代码
2019/06/14 Javascript
vue父子组件的通信方法(实例详解)
2019/11/10 Javascript
[01:15]PWL S2开团时刻第二期——他们杀 我就白给
2020/11/25 DOTA
python3+PyQt5实现拖放功能
2018/04/24 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
python实现拉普拉斯特征图降维示例
2019/11/25 Python
如何用python开发Zeroc Ice应用
2021/01/29 Python
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
简单说下OSPF的操作过程
2014/08/13 面试题
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
个人求职信范文分享
2013/12/13 职场文书
初中生期末考试的自我评价
2013/12/17 职场文书
主办会计岗位职责
2014/03/13 职场文书
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
个人租房协议书(范本)
2014/10/14 职场文书
工作失职检讨书
2015/01/26 职场文书
2015年小学图书室工作总结
2015/05/18 职场文书