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 相关文章推荐
Locate a File Using a File Open Dialog Box
Jun 18 Javascript
用js来刷新当前页面保留参数的具体实现
Dec 23 Javascript
JS获取iframe中longdesc属性的方法
Apr 01 Javascript
使用jQuery实现更改默认alert框体
Apr 13 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
Jun 23 Javascript
只需五句话搞定JavaScript作用域(经典)
Jul 26 Javascript
AngularJS基础 ng-submit 指令简单示例
Aug 03 Javascript
JavaScript中 this 指向问题深度解析
Feb 21 Javascript
在vue项目中引入highcharts图表的方法(详解)
Mar 05 Javascript
加快Vue项目的开发速度的方法
Dec 12 Javascript
js逆向解密之网络爬虫
May 30 Javascript
详解Vue中的基本语法和常用指令
Jul 23 Javascript
Element实现动态表格的示例代码
JavaScript分页组件使用方法详解
webpack的移动端适配方案小结
Jul 25 #Javascript
Vue3.0 手写放大镜效果
ElementUI实现el-form表单重置功能按钮
vue项目多环境配置(.env)的实现
Node与Python 双向通信的实现代码
Jul 16 #Javascript
You might like
PHP新手上路(六)
2006/10/09 PHP
PHP中使用json数据格式定义字面量对象的方法
2014/08/20 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
jQuery学习笔记之Helloworld
2010/12/22 Javascript
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
JavaScript中的getMilliseconds()方法使用详解
2015/06/10 Javascript
css如何让浮动元素水平居中
2015/08/07 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
2016/03/01 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
2016/06/13 Javascript
js实现开启密码大写提示
2016/12/21 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
2016/12/27 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
基于AngularJS实现表单验证功能
2017/07/28 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
vue单页应用加百度统计代码(亲测有效)
2018/01/31 Javascript
vue.js中created方法作用
2018/03/30 Javascript
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
小程序使用watch监听数据变化的方法详解
2019/09/20 Javascript
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
跟老齐学Python之有容乃大的list(1)
2014/09/14 Python
python实现随机梯度下降法
2020/03/24 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
简洁自适应404页面HTML好看的404源码
2020/12/16 HTML / CSS
泰国时尚电商:POMELO Fashion
2020/03/11 全球购物
泰海淘:泰国king Power王权免税集团旗下跨境海淘综合型电商
2020/07/26 全球购物
文秘专业大学生求职信
2013/11/10 职场文书
售票员岗位职责
2015/02/15 职场文书
解决Golang中goroutine执行速度的问题
2021/05/02 Golang
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python
JavaScript最完整的深浅拷贝实现方式详解
2022/02/28 Javascript