前端工程化在vue-cli create-react-app脚手架在前端界大道其行，babel等相关配置越来越被弱化。开

1.babel

在vue-cli create-react-app脚手架在前端界大道其行，babel等相关配置越来越被弱化。开发者只需要知道npm run dev npm run build就可以构建一个完成项目，对于核心知识了解甚少。所以，写下了这篇文章。

现在抛出以下几个概念：babel babel-cli babel-core babel-load babel-polyfill babel-plugin-transfrom-runtime

如果您对上面概念非常了解，您可能不需要往下读了。如果您对上面概念还存有疑惑，那便慢慢读下去。

通俗讲：babel将ES6及其以上代码转化为ES5代码，让浏览器或者node认识并执行。这篇文章主要以babel6讲述，babel7后面会稍稍提到。

当第一次听到babel这个概念时，我以为babel 和webpack等一样，可直接安装，即

npm install babel --save-dev,经过漫长的安装，安装成功，在node_modules下查看babel包，查看内部代码，核心代码都被移除，只有console.warn警告，大概意思说"您安装了错误了babel包，请您卸载并安装babel-cli"。

查阅资料发现，单独的babel包是在babel5时代的，官方也早已废弃这个包。现在提倡用babel-cli。

那么 babel-cli又是什么？请看下面。

babel-cli是个命令行工具，可以通过命令行对代码就行转化，比如:

// 将当前文件夹下的a.js转成es5并写入到b.js文件中
babel a.js --out-file b.js
// 将src目录下的文件遍历转码，写入到lib文件下。
babel src --out-dir lib

这种方式使用较少，仅仅在项目非常小的情况下才会用到。而且，还有个问题:

babel在转import关键字时，会转成common.js标准下的require，在我们浏览器中还是无法直接使用。