原谅我已经入坑这么久才写这种文章，最近心血来潮写es5写的不想写了，而且es6已经出了这么久了也一直没有什么机会经常用，所有打算以后都用es6 多上手感受一下，说不定哪天全部兼容了自己还不会！现在进入正题：我也是参照网上的文档来做的，如有雷同纯属意外。

安装

  1. 先确保电脑上安装了node，npm依赖

    node -v 检查node版本 npm -v 检查npm版本

  2. 电脑需要用到webpack 也需要安装

    webpack -v 检查webpack版本

  3. 上面的都准备完成之后开始安装babel-cli 全局安装

    npm install babel-cli -g

因为我之前误删了好多包还有webapck版本不符， 弄了好久安装了好多遍才成功

  1. 安装转换包babel-preset-es2015 还需要本地安装babel-cli

    npm install —save-dev babel-cli babel-preset-es2015

配置

在当前工作目录新建文件 .babelrc ，注意不是后缀 是文件名 文件一定要调到显示文件扩展名

  1. {
  2.     "presets": [
  3.         "es2015"   //添加需要转换的依赖
  4.     ],
  5.     "plugins": []
  6. }

使用

新建 a.js

  1. let [a, b] = [1, 2]
  3. let mes = () => () => a = 1;
  5. let promise = new Promise((resolve, reject) => {
  7. })
  10. class Scroll {
  11.     constructor() {
  12.         this.a = 1;
  13.         this.b = 2
  14.     }
  16.     showA() { 
  17.         console.log(this.a)
  18.     }
  19. }

终端执行

babel -o a.js b.js

生成文件b.js

  1. "use strict";
  3. var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
  5. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  7. var a = 1,
  8.     b = 2;
  11. var mes = function mes() {
  12.     return function () {
  13.         return a = 1;
  14.     };
  15. };
  17. var promise = new Promise(function (resolve, reject) {});
  19. var Scroll = function () {
  20.     function Scroll() {
  21.         _classCallCheck(this, Scroll);
  23.         this.a = 1;
  24.         this.b = 2;
  25.     }
  27.     _createClass(Scroll, [{
  28.         key: "showA",
  29.         value: function showA() {
  30.             console.log(this.a);
  31.         }
  32.     }]);
  34.     return Scroll;
  35. }();

常用命令

-o, —out-file //输出目标文件

babel 编辑文件 -o 生成文件

-d, —out-dir 输出文件夹下的所有文件对应的文件到目标目录

babel 当前文件夹 -d 生成文件夹

-w, —watch 监听文件修改自动生成目标内容
-s 参数生成source map 文件

babel src -d lib -s

自动监听文件修改

执行 babel -w [in] [out] 或者在package.json中修改scripts

  1. "scripts": {
  2.     "test": "echo \"Error: no test specified\" && exit 1",
  3.     "start": "babel -w _js --out-dir js"
  4.   },

执行 npm start