babel的使用及babel与gulp结合工作流

时间:2024-01-07 19:42:20

Babel 通过语法转换器支持最新版本的 JavaScript 。 它有非常多的插件,这些插件能够允许我们立刻使用新语法,无需等待浏览器支持。
那我们怎么使用babel呢?
首先我们来了解babel基本的安装
第一:babel的安装
babel的使用及babel与gulp结合工作流
第二:查看babel版本以及babel命令
babel的使用及babel与gulp结合工作流
第三步:建立文件夹,初始化一个仓库,将我们的配置写成一个package.json文件。
babel的使用及babel与gulp结合工作流
第四步:新建一个文件,并单独输出其编译之后的文件,这是单个文件的监听。
babel的使用及babel与gulp结合工作流
第五步:新建文件夹,将之前所建的test.js文件移动到文件夹内,删除之前监听的输出后的单个文件,再进行文件夹的监听。
babel的使用及babel与gulp结合工作流
现在整个工程目录如下
babel的使用及babel与gulp结合工作流
第六步:当我们工程中需要使用babel的时候,我们使用 cnpm install babel-cli --save-dev来进行安装,当前项目依赖babel-cli。
babel的使用及babel与gulp结合工作流
我们可以使用babel-node去运行文件
babel的使用及babel与gulp结合工作流
接下来我们来看看babel如何来解析ES6/ES7的语法。
第一步:创建.babelrc文件,在文件中写入
babel的使用及babel与gulp结合工作流
第二步:下载相关的preset,并将babel去做一个监听,将src目录下的项目编译到dist目录下。
babel的使用及babel与gulp结合工作流
在文件中写入
babel的使用及babel与gulp结合工作流
使用babel的使用及babel与gulp结合工作流

可以看到这个编译之后的代码
babel的使用及babel与gulp结合工作流
编译之前代码如下
babel的使用及babel与gulp结合工作流
通过代码可以看到其实编译出来的代码并不精简
我们可以通过安装babel的使用及babel与gulp结合工作流
再在.babelrc里面进行修改babel的使用及babel与gulp结合工作流
通过运行
babel的使用及babel与gulp结合工作流
查看编译之后的结果,比之前的精简许多。
babel的使用及babel与gulp结合工作流
如果我们想babel还可以编译es2016的话,我们可以继续安装preset
babel的使用及babel与gulp结合工作流
要记得修改.babelrc文件。
babel的使用及babel与gulp结合工作流
如果想将gulp和babel结合使用完成一整套的工作流程,该怎么做呢?
第一步:安装gulp插件,删掉之前输出编译之后文件的dist目录
babel的使用及babel与gulp结合工作流
第二步:建立gulpfile.js,文件,写入配置,运行。
babel的使用及babel与gulp结合工作流
babel的使用及babel与gulp结合工作流
babel的使用及babel与gulp结合工作流
babel的使用及babel与gulp结合工作流
很想把完整的demo也给大家看,已经上传到github了:https://github.com/JserJser/reactDemo/tree/master/babel-cli/babel-demos