项目中配置Babel转码器的详细教程
先简单说一下Babel吧
Babel是一个ES6转码器,可以将ES6代码转为ES5代码
此篇教程是在学习阮老师的《ES6标准入门》时,不会npm的学习总结
在阮老师的教程上具体补充,通过以下几个步骤,即可在项目中直接安装Babel转码器,一行命令即可进行ES6转码
第一步:创建package.json
package.json
文件是一个描述文件,主要有以下3个作用:
1.描述项目依赖了哪些包
2.可以使用“语义化版本规则”指明项目依赖包的版本,表明接受更新的程度
3.与其他开发者分享
另外,package.json中,至少要有两部分内容
"name"与"version"
这里只是简单介绍,有兴趣继续深入的话看看文尾的链接吧
现在我们来创建一个package.json
1.打开cmd进入项目文件,输入"npm init" `项目下安装package.json
运行命令后会让你配置各个部分
name与version处直接回车的话就默认按文件名和1.0.0的版本号配置咯,其他配置可以直接回车到最后
完成后,文件夹中就会出现一个package.json
第二步:创建Babel的配置文件.babelrc
.babelrc文件用于设置转码规则
和插件
,基本规则:
{"presets":[ ],"plugins":[ ]}
因为window下不可以直接创建空文件名的文件,所以我们用另存为的方式创建这个配置文件
新建文本输入配置:
然后另存为
(注意保存类型改为所有文件)
“新建文本文档.txt"也就可以删掉啦,后面配置时用NotePad打开就好
第三步:安装规则集,设置.babelrc
上一步已经创建好.babelrc了,接下来我们安装规则集
preset字段设定转码规则,官方给了我们多个规则集,以下是安装命令
//最新转码规则npm install --save-dev babel-preset-latest//react 转码规则npm install --save-dev babel-preset-react//不同阶段语法提案的转码规则(4选1)npm install --save-dev babel-preset-stage-0npm install --save-dev babel-preset-stage-1npm install --save-dev babel-preset-stage-2npm install --save-dev babel-preset-stage-3
输入
npm install --save-dev babel-preset-latestnpm install --save-dev babel-preset-react
在4选1中选npm install --save-dev babel-preset-stage-2
。。。。安装中。。。。。
安装完成!
安装完成后我们可以在package.json
中安装的包
现在让我们来设置.babelrc
吧,如下图
第四步:项目中安装babel-cli,再改写package.json
安装babel-cli前,我们先创建一个存放js的文件夹吧,放等会用来转换的js脚本,我把它命名为jsFolder
现在,输入npm install --save-dev babel-cli
安装babel-cli
然后改写package.json:在scripts中加入
"build": "babel src -d lib"src:放置原js的文件夹路径lib:放置转换后js的文件路径(没有的话会自动创建)
按照创建的jsFolder,我们这样子写
ok!保存退出,现在我们可以一个命令转换了
开始测试!
先在jsFolder中创建一个ES6代码,我们用阮老师的例子
然后cmd中输入npm run build
到lib中看看
嗯,然后就转换完成了,就算jsFolder中有多个js命令,或者项目扔给其他伙伴,直接一个命令就可以完成转换啦
参考资料:
《ES6标准入门(第3版)》
npm 与 package.json 快速入门教程:https://blog.csdn.net/u011240... BB%BA
项目中配置Babel转码器的详细教程相关推荐
- android studio 中配置groovy源码_麻省理工教程:使用Unity AR Foundation在AR中查看模型...
本文将分享麻省理工学院的教程-使用Unity AR Foundation在增强现实中查看模型. 在本教程中,我们将介绍如何把3D模型导入Unity,并使用Android设备或iOS设备在AR中查看模型 ...
- ES6学习(一)— Babel转码器的使用和配置
ES6学习(一)- Babel转码器的使用和配置 Babel转码器 Babel是一个广泛使用的ES6转码器,可以将ES6代码转化为ES5代码从而在老版本的浏览器进行. 这意味着,你可以使用ES6的方式 ...
- es6 babel转码器安装配置
es6 babel转码器安装配置 例如:桌面上新建个文件夹es6,文件夹里新建一个文件es6.js. 打开小黑窗进入文件夹.(windows要以管理员的方式打开cmd) 1.先全局安装babel-cl ...
- npm(了解)+Babel转码器+模块化+webpack打包
目录 介绍 设置镜像导入依赖 其他命令 Babel转码器 模块化 es6怎么做模块化 webpack webpack的使用 介绍 一个包的管理工具,类似与Maven,用于前端中管理JS的依赖 查看版本 ...
- Babel转码器详解
Babel转码器详解 Babel是一个广为使用的ES6转码器,可以将ES6代码转为ES5代码,从而在浏览器或其他环境运行.这意味着可以用ES6的方式编写程序而不用担心环境是否支持 Babel的配置文件 ...
- ES6转码(编译)工具——Babel转码器、Traceur转码器
当ES6不兼容时,需要用到转码工具 1.Babel转码器: Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行. 这意味着,你可以用ES6的方式编写程序,又不用 ...
- 解决VScode安装Babel转码器报错:无法将“cnpm“项识别为cmdlet\函数、脚本文件或可运行程序的名称的问题
解决VScode安装Babel转码器报错:无法将"cnpm"项识别为cmdlet\函数.脚本文件或可运行程序的名称的问题 报错结果如下: 解决方案 第一步:安装npm 点我安装np ...
- 常见的ES6转码(编译)工具——Babel转码器、Traceur转码器
在浏览器里面如何使用? 现在ES6的使用也是一个新趋势,下面就来讲解转码的常见方法 当ES6不兼容时,需要用到转码工具 1.Babel转码器: Babel是一个广泛使用的ES6转码器,可以将ES6代码 ...
- 【Android 安全】DEX 加密 ( 代理 Application 开发 | 项目中配置 OpenSSL 开源库 | 使用 OpenSSL 开源库解密 dex 文件 )
文章目录 一.项目中配置 OpenSSL 开源库 二.OpenSSL 开源库解密参考代码 三.解密 dex 文件的 Java 代码 四.解密 dex 文件的 Jni 代码 参考博客 : [Androi ...
最新文章
- matlab 方波_MATLAB之Simulink(二)利用switch模块将正弦信号变为方波信号
- 口碑扑街光环不在,2018将是苹果手机最难熬的年头!
- HDU - 6183 Color it(动态开点线段树/树状数组套动态开点线段树)
- java home not set_Error: JAVA_HOME is not set and could not be found.
- echarts案例链接
- 6 SystemVerilog语言编写售货机
- 记录一次OOM排查经历
- sap原因代码配置路径_使用Visual Studio Code编写和激活ABAP代码 (上)
- iphone4s上市时间_iPhone 4S才是真正意义上的王者, 网友: 现在依旧能打
- clickhouse各种表引擎的异同
- 在word文档里有一个向下的箭头,那是什么标志?
- 域名生成企业邮箱golang企业邮箱发邮件 golang gmail发邮件
- 计算机十年歌曲,抖音还有多少个十年能勇敢做热血青年是什么歌
- c语言 sleep_编程代码:用C语言来实现下雪效果,这个冬天,雪花很美
- 杰瑞学Perl之文件操作(1)
- 2021苏州高考 学校成绩查询,2021苏州市地区高考成绩排名查询,苏州市高考各高中成绩喜报榜单...
- 编程语言Python与C的优劣比较
- H3CSE路由-IPv6过渡技术
- springboot+mybaitsplus+vue简单的CURD
- ArcGIS:根据DEM数据提取区域水系
热门文章
- RadioButtonList Enabled=false 文字背景
- 通达oa wbupload.php,关于通达OA上传附件类型限制的设置
- html5手机端三级联动城市选择代码,省市县三级联动(jQuery手机端收货地址选择地区代码)...
- 关闭linux系统中读写页缓存,Linux文件系统FAQ
- PHP点歌插件,斗鱼弹幕点歌插件_小葫芦社区_小葫芦插件交流 - Powered by Discuz!
- 壁式框架内力计算_剪力墙结构设计计算要点和实例
- idea 自动生产序列吗,IDEA自动生成序列化Id
- js ...运算符_「 giao-js 」用js写一个js解释器
- xshell 软件的窗口一直是置顶 调整为不置顶
- mysql数据库的存储过程不用学吗,MySql数据库之存储过程学习_MySQL