babel环境安装与编译

babel是一个js编译器

能够把浏览器不支持的代码编译成浏览器的代码（把不支持的ES6特性编译为ES5）

babel官网 https://www.babeljs.cn/

 

 

演示1

 

 

演示2

 

 

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

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

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

 

 

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

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

 

 

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

 

 

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

. 当前目录

.. 上级目录

 

 

安装配置过程：

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

 

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

 

 

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

 

2、安装babel

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

 

 

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

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

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

 

 

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

 

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

 

 在cmd中输入cnpm run build

 

 

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

来安装一下这个preset-env

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

 

 

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

 

 

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

创建一个文件.babelrc（必须是这个命名）

代码如下（注意是遵循json格式的语法）

 

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

 

 

 

 

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

 

 

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

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

 

 

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

 

 cnpm run build

项目中自动生成了index.js

 

 

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

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

 

 下面是测试：修改entry.js

 

 新建index.html，引入index.js

 

 编译文件

 

 在浏览器访问index.html

 

 

成功实现监听的效果

 

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

修改entry.js代码

 

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

 

 安装插件来支持这种语法

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

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

 

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

 

 

修改entry.js

 

 浏览器查看结果

 

 

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

 

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