（25）npm scripts 实践—构建脚本文件

一、先来看2张对比图

通过如下2个图片，我们看到，我们应该构建好以后再进行浏览器中运行。没有构建前是ES6的箭头函数写法，我们要转换成ES5的写法然后再运行。为什么要构建？因为ES6再某些浏览器是不支持的，所以需要转换成ES5写法。

二、示例

通过如下示例我们可以看到，我们使用ES6语法的箭头函数，执行了一个点击事件，当点击的时候触发函数，弹出一个警示框，我们分别再IE浏览器和谷歌浏览器中进行测试发现，谷歌浏览器实现了效果，说明谷歌浏览器兼容ES6写法，而IE浏览器呢我们再点击的时候没有任何效果，所以说IE浏览器不支持ES6语法，所以我们为了让我们的ES6兼容IE浏览器，必须要将ES6语法，转换成ES5语法。

那么怎么转换呢？

这里推荐一款Babel 插件可以将 ES6+ 新语法转成 ES5。

那么为什么IE浏览器兼容ES5语法呢？

ECMAScript的版本和发布时间图，通过如下图我们可以看到，我们的ES5再2009年就发布了，很早，所以它的语法已经兼容了IE浏览器了，而ES6语法是2015年发布的，属于新语法，我们的IE浏览器还不认识它们，所以我们要想兼容IE浏览器，必须要将ES6语法转换成ES5语法。 

三、Babel的转换规则

Babel转换是根据我们ECMAScript语法的发布时间进行规定的，如果我们想要转换ES2017，那么就需要使用babel-preset-es2018,如果我们想要转换2016,那么就需要使用babel-preset-es2017，以此类推，那么我们有没有想到一个问题，我们的ECMAScript语法，从ES6开始，都是以年份结尾开始称呼，这是我们官方更改的，这样看起来更加友好一些，就不再继续类推ES7 ES8这样的叫法了，那么我们ECMAScript语法，随着年代变化，我们每年都会有新的语法特性，那么我们新特性多了，也不清楚它是哪年的语法，还要书写很多个Babel转换规则转换，是不是太麻烦了。

注意：不用担心，我们继续往下看。！！！

如下图babel-preset-env呢，它可以一条转换实现任何ECMAScript语法的版本的转换。是不是很nice呢！

四、Babel的转换命令

五、Babel的转换步骤

• 初始化项目（ npm init --yes ）

• 安装 Babel（ npm i babel-core babel-cli -g ）2个包同时安装使用空格分隔

• 安装转码规则（ npm i -D babel-preset-env ）

• 配置转换规则（ .babelrc ）

• 在 npm scripts 中添加转换命令（ babel src -d dist ）

• 执行转换命令 

六、示例

1.初始化项目（ npm init --yes ）

2.安装 Babel命令（ npm i babel-core babel-cli -g ）

3.安装转码规则（ npm i -D babel-preset-env ）

4. 配置转换规则（ .babelrc ）

5.在 npm scripts 中添加转换命令（ babel src -d dist ）

package.json文件 

还可以将压缩文件一起加入执行，使用&&符号串行执行。

6.执行转换命令 

7.将引入文件的路径改为scripts压缩后的文件引入

8.IE浏览器运行结果

虽然和谷歌浏览器的弹窗不一样，但是它解决了ES6语法的问题，成功将ES6语法转换成了ES5语法。