项目中配置Babel转码器的详细教程

zzbo 发布于2019-08-26 12:21 / 2933人阅读

先简单说一下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-0

npm install --save-dev babel-preset-stage-1

npm install --save-dev babel-preset-stage-2

npm install --save-dev babel-preset-stage-3

输入

npm install --save-dev babel-preset-latest

npm 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

专线服务 idc机房托管把项目配置到服务器中 cdn加速中的关键技术,cdn技术详细解剖, java项目中的调度 python详细教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108553.html

Babel 7 转码的正确姿势

摘要：转码的配置是每位前端童鞋在日常工作中都会遇到的。简单点来说就是在转码过程中，对于一些新语法，都会抽象一个个小的函数，在转码过程中完成替换。以上即是我总结的转码姿势，如果对本篇有疑问或建议，欢迎在这里提出。 Babel 转码的配置是每位前端童鞋在日常工作中都会遇到的。刚开始我也是在网上搜索各种配置方法，升级到 Babel 7 的时候又折腾了一把，所以决定把自己的心得和理解记录下来，希望能...

JohnLui 2019-08-26 14:01 评论0 收藏0
ES6常用语法整合

摘要：说到肯定是先介绍了，据阮一峰老师介绍到，是一个广泛使用的转码器，可以将代码转为代码，从而在现有环境执行。输出其他还有等可以查看阮一峰的入门 ES6也出来有一会时间了，他新增的语法糖也的确大大提高了开发者的效率，今天就总结一些自己用到最多的。说到ES6肯定是先介绍Babel了，据阮一峰老师介绍到，Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。这意...

张迁 2019-08-20 15:31 评论0 收藏0
[Webpack并不难]使用教程（二）--- module.loaders

摘要：官方的文档模块受到影响的选项。官方文档通过注入标签将添加到。官方文档这两者一般都是配合在一起用的。代表图片打包限制，这个限制并不是说超过了就不能打包，而是指当图片大小小于限制时会自动转成码引用。不过它的放后面。第一篇讲了Webpack的安装，以及配置文件的 entry，devtool，output，resolve。这篇接着说配置文件的 module。想看看第一篇的朋友可以点这里。 ...

HollisChuang 2019-08-21 17:59 评论0 收藏0
一天快速了解Babel

摘要：在做项目中一直使用的是脚手架搭建的环境，一直没有仔细的去了解这一工具，这周末抽出一天时间通过官网还有各种博客文章算是了解了一些内容，起码可以在项目中自己完成的配置了。不过好像目前浏览器端对这种诸如之类的方法支持的还不错了。在做项目中一直使用的是脚手架搭建的环境，一直没有仔细的去了解 babel 这一工具，这周末抽出一天时间通过官网还有各种博客文章算是了解了一些内容，起码可以在项目中自...

qiangdada 2019-08-22 18:15 评论0 收藏0
Babel入门——ES6转ES5

摘要：首先安装使用时在文件头加载然后，就不需要手动对转码了。原文转载自阮一峰教程本文讲解如何在nodejs环境下使用babel将ES6代码转ES5以及运行ES6的js文件配置.babelrc文件首先安装es2015的presets字段 $ npm install --save-dev babel-preset-es2015 然后写入.babelrc { presets:[ ...

stdying 2019-08-22 11:22 评论0 收藏0