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 相关文章推荐
JS画线(实例代码)
Nov 20 Javascript
jquery根据name属性查找的小例子
Nov 21 Javascript
jquery解析xml字符串示例分享
Mar 25 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 Javascript
js获取当前时间(昨天、今天、明天)
Nov 23 Javascript
原生node.js案例--前后台交互
Feb 20 Javascript
vue+axios实现登录拦截的实例代码
May 22 Javascript
jQuery实现拖动效果的实例代码
Jun 25 jQuery
node实现简单的反向代理服务器
Jul 26 Javascript
JS+DIV实现拖动效果
Feb 11 Javascript
Vue如何实现监听组件原生事件
Jul 03 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
Element实现动态表格的示例代码
JavaScript分页组件使用方法详解
webpack的移动端适配方案小结
Jul 25 #Javascript
Vue3.0 手写放大镜效果
ElementUI实现el-form表单重置功能按钮
vue项目多环境配置(.env)的实现
Node与Python 双向通信的实现代码
Jul 16 #Javascript
You might like
php 文件上传代码(限制jpg文件)
2010/01/05 PHP
THINKPHP内容分页代码分享
2015/01/14 PHP
php实现网页缓存的工具类分享
2015/07/14 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
PHP时间日期增减操作示例【date strtotime实现加一天、加一月等操作】
2018/12/21 PHP
国外的为初学者写的JavaScript教程
2008/06/09 Javascript
jqPlot jquery的页面图表绘制工具
2009/07/25 Javascript
JS解析XML的实现代码
2009/11/12 Javascript
JS字符串处理实例代码
2013/08/05 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
jQuery固定元素插件scrolltofixed使用指南
2015/04/21 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
2016/04/26 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
JS基于正则表达式实现的密码强度验证功能示例
2017/09/21 Javascript
详解Angular6 热加载配置方案
2018/08/18 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
vue实现树状表格效果
2020/12/29 Vue.js
Python使用scrapy采集时伪装成HTTP/1.1的方法
2015/04/08 Python
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
Python PyInstaller库基本使用方法分析
2019/12/12 Python
Spring Boot中使用IntelliJ IDEA插件EasyCode一键生成代码详细方法
2020/03/20 Python
Python连接Hadoop数据中遇到的各种坑(汇总)
2020/04/14 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
匡威爱尔兰官网:Converse爱尔兰
2019/06/09 全球购物
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
党委班子对照检查材料
2014/08/19 职场文书
授权委托书
2014/09/17 职场文书
使用Navicat Premium工具将oracle数据库迁移到MySQL
2021/05/27 Oracle
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL
redis protocol通信协议及使用详解
2022/07/15 Redis