欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

babel环境安装与编译

程序员文章站 2022-04-23 22:09:18
babel是一个js编译器 能够把浏览器不支持的代码编译成浏览器的代码(把不支持的ES6特性编译为ES5) babel官网 https://www.babeljs.cn/ 演示1 演示2 要安装babel,首先需要安装node.js 我之前已经安装过了,cmd里输出node -v即可查看 安装nod ......

babel是一个js编译器

能够把浏览器不支持的代码编译成浏览器的代码(把不支持的es6特性编译为es5)

babel官网 

babel环境安装与编译

 

 

演示1

babel环境安装与编译

 

 

演示2

babel环境安装与编译

 

 

要安装babel,首先需要安装node.js

我之前已经安装过了,cmd里输出node -v即可查看

安装node时会把npm也给装了,npm国内使用比较慢,因此我使用了淘宝镜像cnpm

babel环境安装与编译

 

 

如何进入想要的文件夹,假设桌面上有个project目录

1、cmd打开,输入cd desktop,cd project

babel环境安装与编译

 

 

2、鼠标打开进入project目录,shift+右键-选择-在此处打开powershell窗口

babel环境安装与编译

 

 

dir可以查看当前目录里有多少目录和文件

. 当前目录

.. 上级目录

babel环境安装与编译

 

 

安装配置过程:

1、使用cnpm init 初始化package.json 配置文件(所有选项直接回车选择默认)

babel环境安装与编译

 

 完成后项目文件夹里就多了这个配置文件

babel环境安装与编译

 

 

当然你也可以使用 cnpm -y ,这样就不会每一步都询问你,而是直接使用默认配置

 

2、安装babel

cnpm install --save-dev @babel/core @babel/cli

babel环境安装与编译

 

 

如果安装失败,有可能是因为权限的原因。

mac用户就在代码前面加上sudo,windows用户就使用管理员身份打开cmd

安装成功后会发现package.json多了一项配置内容

babel环境安装与编译

 

 

3、在package.json中添加一段代码,作用是在cmd输入cnpm run build,默认就会执行entry.js中的脚本

babel环境安装与编译

 

 在entry.js中输入一些es6语法的代码用于测试

babel环境安装与编译

 

 在cmd中输入cnpm run build

babel环境安装与编译

 

 

4、我们可以发现,es6代码并没有成功编译为es5,这是因为我们没有定义转换规则,缺少一个包preset-env

来安装一下这个preset-env

cnpm install --save-dev @babel/preset-env

babel环境安装与编译

 

 

查看package.json发现已经安装成功

babel环境安装与编译

 

 

5、下一步就是创建一个规则,来告诉babel要怎么编译es6代码

创建一个文件.babelrc(必须是这个命名)

代码如下(注意是遵循json格式的语法)

babel环境安装与编译

 

需要注意的是,这里填写的内容不是固定的,可以参考在package.json中是怎么写的

 babel环境安装与编译

 

 babel环境安装与编译

 

 然后再次进行编译,可以看到代码已经编译为了es5的语法

babel环境安装与编译

 

 

6、配置可以做的更详细些

下面这段代码的意思是,把es6语法编译成浏览器支持的上一个版本,即es5

babel环境安装与编译

 

 

7、实现编译后的代码输出到文件中,修改package.json,把代码输出到index.js中

babel环境安装与编译

 

 cnpm run build

项目中自动生成了index.js

babel环境安装与编译

 

 

8、每次手动编译是比较麻烦的,修改package.json

-w会让程序处于挂起状态,保存后会更新代码

babel环境安装与编译

 

 下面是测试:修改entry.js

babel环境安装与编译

 

 新建index.html,引入index.js

babel环境安装与编译

 

 编译文件

babel环境安装与编译

 

 在浏览器访问index.html

babel环境安装与编译

 

 

成功实现监听的效果

 

9.尝试一下es6还在提案中的一些特性

修改entry.js代码

babel环境安装与编译

 

 查看编译结果,有语法错误,报错

babel环境安装与编译

 

 安装插件来支持这种语法

转换类属性的插件 @babel/plugin-proposal-class-properties

cnpm install --save-dev @babel/plugin-proposal-class-properties

 

安装成功后在.babelrc.json中添加代码

babel环境安装与编译

 

 

修改entry.js

babel环境安装与编译

 

 浏览器查看结果

babel环境安装与编译

 

 

说明babel通过插件让我们成功体验到了es6的新特性(还未被很好的支持)

 

最后,需要注意,由于版本更新,代码都是会发生改变的,具体怎么操作看官方文档!!!