webpack之babel讲解

前言：

本文演示了

• 如何安装配置babel基本命令
• 如何安装配置babel插件
• 如何配置.babelrc文件
• 如何安装配置babel预设presets
  

正文：

babel 是一个强大的js编译器，功能包括不限于：

• es6编译成es5语法；
• 编译jsx语法
  

安装配置babel

首先，创建项目目录,初始化npm

$ mkdir babel
$ cd babel
$ npm init
$ mkdir src
$ cd src
$ touch app.js
$ cd ../ 

以上命令执行完之后的项目目录：

安装babel-cli

$ npm i -D babel-cli

编辑app.js

现在我们尝试着用babel编译app.js

$ babel src/app.js

此时，命令行会提示找不到相关命令：

原因是我们的babel并没有全局安装(全局安装命令：npm i -g babel)。

当前babel安装目录: node_modules/.bin/babel

所以我们在这里应该执行命令：

$ node_modules/.bin/babel src/app.js

或者，配置一下package.json文件，

然后，执行命令：

$ npm run babel

命令执行完毕，发现编译完成的app.js并没有任何变化。这是因为babel功能太强大，它能做的工作很多，在你告诉它要干什么之前，它不会进行任何工作。babel的工作是基于插件的，没有插件babel将一无是处。

安装配置babel插件 plugins

在我们的app.js中，我们需要编译那箭头函数和class的插件，即 es2015-arrow-functions、es2015-classes

首先安装我们的插件

npm i -D  babel-plugin-transform-es2015-arrow-functions babel-plugin-transform-es2015-classes

配置我们的paskage.json文件：

执行命令：npm run babel 编译成功！

如果我们要使用的插件非常多，那plugins=后面的内容将会非常长。

将babel配置写入 .babelrc

在项目中新建 .babelrc 文件：

$ touch .babelrc

编辑.babelrc文件：

编辑package.json文件：

执行命令： npm run  babel 编译成功！

那是不是我们每次使用一种语法就需要在.babelrc的plugins对应的数组中增加一项呢？答案当然是不用这么麻烦！

这里就扯出了 babel预设。

presets

Presets 是可共享的 .babelrc 配置或者只是一个 babel 插件的数组。

babel-preset-env 预设 可以编译es2015、es2016、es2017代码为es5代码

安装  babel-preset-env

$ npm i -D babel-preset-env

配置 .babelrc 文件：

执行 npm run babel ,编译成功！

这里编译成功后并没有生成编译后的新的js文件，改一下package.json配置即可：

需要注意，这里需要手动的创建dist目录，否则执行 npm run babel的时候会报错找不到相关路径。