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的新特性（还未被很好的支持）

?

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!