title: Laravel Elixir enable stage-2 within babelify using browserify
body: <p>I have been searching for answer an all weekend. To no avail. I have been down the webpack <em>rabbit hole</em> with elixir 6 and back to browserify.  </p>
  
  <p>This gist here looked promising: <a href="https://gist.github.com/sagalbot/6150d4f536af7b4c4f9a9879856e595d" rel="nofollow">https://gist.github.com/sagalbot/6150d4f536af7b4c4f9a9879856e595d</a></p>
  
  <pre><code>//  Default babel presets are ['es2015', 'react']
  //  https://babeljs.io/docs/plugins/preset-stage-2/
  elixir.config.js.babel.options.presets = ['es2015', 'stage-2'];
  </code></pre>
  
  <p>However <code>elixir.config.js.babel</code> is undefined — why is that? Was there a refactor done? I can't get it working.  </p>
  
  <p><em>All I want to do is enable stage-2. (<a href="https://babeljs.io/docs/plugins/preset-stage-2/" rel="nofollow">https://babeljs.io/docs/plugins/preset-stage-2/</a>)</em></p>
  
  <p>My gulp file</p>
  
  <pre><code>require("laravel-elixir-remove");
  require("laravel-elixir-bless");
  require("laravel-elixir-browserify-official");
  //require('laravel-elixir-scss-lint'); // this doesn't work under elixir ^6.0.0-10
  require('elixir-typescript');
  require("./gulp/ts.lint");
  
  var elixir = require("laravel-elixir");
  var jsonminify = require("jsonminify");
  var config = require("./gulp/parse.config");
  var argv = require("yargs").argv;
  var fs = require("fs");
  elixir.config.js.babel.enabled = true;
  // grab the JSON file and make a copy of it.
  // strip out the comments from the JSON file using jsonminify
  var ORIGINAL_CONFIG = config.getJSON("./build.config.json");
  
  //set the replacement section of the JSON file to modify the remainder of the JSON
  config.setConfigKey("replacements");
  config.parse(ORIGINAL_CONFIG);
  elixir = config.setElixirPaths(elixir);
  
  /*======================================================================================*/
  // BROWSERIFY OPERATIONS
  /*======================================================================================*/
  var BROWSERIFYCONFIG = elixir.config.js.browserify;
  
  BROWSERIFYCONFIG.plugins.push({
      name: "tsify", options: {
          target: "es5",
          experimentalDecorators: true,
          babelify: {
              extensions: [".tsx", ".ts"]
          }
      }
  });
  
  // can't get this working, I can't enable the spread/rest operator.
  // elixir.config.js.browserify.transformers
  //     .find(transformer =&gt; transformer.name === 'babelify')
  //     .options.plugins = [
  //     'syntax-object-rest-spread',
  //     'transform-object-rest-spread'
  // ];
  
  BROWSERIFYCONFIG.plugins.push(
      {
          name: "factor-bundle",
          options: {
              // generate js files from the input, the order is crucial
              outputs: config.get("browserify.in", "js")
          }
      }
  );
  
  // this is undefined. When was the babel property removed from the elixir config object?!!
  //console.log(elixir.config.js.babel);
  //elixir.config.js.babel.options.presets = ['es2015', 'stage-2'];
  
  /*======================================================================================*/
  // BUILD
  /*======================================================================================*/
  elixir(build);
  function build(mix) {
  
      if (!argv.hasOwnProperty("scss")) {
          // if there is no public dir, create it, as browserify expects
          if (!fs.existsSync(config.get("replacements.outPath"))) {
              fs.mkdirSync(config.get("replacements.outPath"));
              fs.mkdirSync(config.get("replacements.js"));
          }
  
          // browserify node_modules and write out
          mix.browserify(
              // factor all the files in order:
              config.get("browserify.in", "ts"),
              // and generate one file that is common to all of them:
              config.get("browserify.out", "js")
          );
      }
      //
      // if (!argv.hasOwnProperty("js")) {
      //
      //     // concatenate js files first
          mix.scripts(
              config.get("concat.in", "js"),
              config.get("concat.out", "js")
          );
      //
      //     //generate the css ( note we can't loop over )
      //     mix.sass(config.get('scss.0.in', 'scss'), config.get('scss.0.out', 'css'),{sourceComments:true})
      //         .sass(config.get('scss.1.in', 'scss'), config.get('scss.1.out', 'css'))
      //         .sass(config.get('scss.2.in', 'scss'), config.get('sass.2.out', 'css'))
      //         .sass(config.get('scss.3.in', 'scss'), config.get('scss.3.out', 'css'))
      //         .browserSync({
      //             files: ["**/*.css", "**/*.js", "**/*.php"],
      //             proxy: "website.mock",
      //             port: 4000,
      //             logPrefix: "Laravel Eixir BrowserSync"
      //         });
      //
      //     if(!argv.hasOwnProperty("production")){
      //         mix.scssLint(config.get('sasslint.in', 'scss'));
      //         mix.tslint(config.get("tslint.in", "ts"), config.getJSON(config.get("tslint.rules", "json")));
      //     }
      //
      //     // copy debug files over — temporary
      //     mix.copy(config.get('copy.0.in', 'css'), config.get('copy.0.out', 'css'))
      //         .copy(config.get('copy.1.in', 'css'), config.get('copy.1.out', 'css'))
      //         .copy(config.get('copy.2.in', 'js'), config.get('copy.2.out', 'js'))
      //         .copy(config.get('copy.3.in'), config.get('copy.3.out'))
      //         .bless(config.get('bless.0.in', 'css'), {imports: true});
      // }
  }
  </code></pre>
  
  <p>I have a .babelrc file </p>
  
  <pre><code>{
    "presets": ["stage-2"],
    "comments": true
  }
  </code></pre>
  
  <p>Which seems to be ignored. </p>
  
  <p>Package.json</p>
  
  <pre><code>{
    "devDependencies": {
      "alterclass": "git+https://github.com/sidouglas/alter-class#1.0",
      "babel": "^6.5.2",
      "babel-core": "^6.10.4",
      "babel-preset-stage-2": "^6.13.0",
      "babel-register": "^6.9.0",
      "bootstrap-pull": "git+https://github.com/sidouglas/bootstrap-pull.git#3.0.2",
      "browserify-shim": "^3.8.12",
      "dot-object": "^1.4.1",
      "elixir-jasmine": "0.0.4",
      "gulp": "^3.9.1",
      "gulp-replace-task": "^0.11.0",
      "gulp-tslint": "^6.0.1",
      "jasmine-fixture": "^2.0.0",
      "jasmine-jquery": "^2.1.1",
      "jsonminify": "^0.4.1",
      "karma": "^1.1.1",
      "karma-chrome-launcher": "^1.0.1",
      "karma-firefox-launcher": "^1.0.0",
      "karma-ios-simulator-launcher": "0.0.4",
      "karma-jasmine": "^1.0.2",
      "karma-safari-launcher": "^1.0.0",
      "laravel-elixir": "^6.0.0-10",
      "laravel-elixir-bless": "^2.0.0",
      "laravel-elixir-browserify-official": "^0.1.3",
      "laravel-elixir-browsersync": "^0.1.5",
      "laravel-elixir-browsersync-official": "^1.0.0",
      "laravel-elixir-remove": "^0.2.1",
      "lodash": "^4.13.1",
      "node-sass": "^3.8.0",
      "retyped-bowser-tsd-ambient": "0.0.0-0",
      "run-sequence": "^1.2.1",
      "sass-convert": "^0.5.2",
      "supplant": "^0.2.0",
      "tsify": "^1.0.4",
      "tslint": "^3.13.0",
      "typescript": "^1.9.0-dev.20160605-1.0",
      "yargs": "^4.8.0"
    },
    "dependencies": {
      "babel-plugin-transform-object-rest-spread": "^6.8.0",
      "babel-preset-es2015": "^6.14.0",
      "babel-preset-react": "^6.11.1",
      "boilerplate": "^0.5.0",
      "bootstrap": "^3.3.6",
      "bootstrap-sass": "^3.3.6",
      "bootstrap-select": "^1.10.0",
      "bowser": "^1.4.2",
      "del": "^2.2.0",
      "elixir-typescript": "^2.0.0",
      "factor-bundle": "^2.5.0",
      "gulp-change": "^1.0.0",
      "gulp-shell": "^0.5.2",
      "include-media": "^1.4.5",
      "jquery": "^2.2.4",
      "jquery-replace-class": "0.0.1",
      "lodash": "^4.14.0",
      "material-kit": "git://github.com/tfsimondouglas/material-kit-bootstrap-3.git#1.1",
      "nouislider": "^8.5.1",
      "partition-bundle": "^2.5.0",
      "redux": "^3.5.2",
      "requirejs": "^2.2.0",
      "riot": "^2.5.0",
      "riot-ts": "git://github.com/tfsimondouglas/riot-ts.git",
      "tf-modernizr": "git://github.com/tomorrowfinance/tf-modernizr.git",
      "webshim": "^1.15.10",
      "wnumb": "git://github.com/tannerhodges/wnumb"
    },
    "scripts": {
      "test": "protractor protractor.conf.js",
      "postinstall": "node node_modules/.bin/gulp --production",
      "watch": "node node_modules/.bin/gulp watch",
      "gulp": "node node_modules/.bin/gulp",
      "kill": "for pid in `ps -ef | grep gulp | awk '{print $2}'` ; do kill -9 $pid ; done",
      "start": "npm run watch",
      "restart": "npm run kill &amp; npm start",
      "build": "node node_modules/.bin/gulp --production"
    }
  }
  </code></pre>
  
  <p><strong>Edit 29-08-2016</strong></p>
  
  <p>So a simple test:</p>
  
  <pre><code>let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
  console.log(x); // 1
  console.log(y); // 2
  console.log(z); // { a: 3, b: 4 }
  
  // Spread properties
  let n = { x, y, ...z };
  console.log(n); // { x: 1, y: 2, a: 3, b: 4 }
  </code></pre>
  
  <p>Causes this error:</p>
  
  <pre><code>[14:39:26] Starting 'all'...
  [14:39:26] Starting 'browserify'...
  { [TypeScript error: ...path ommitted...app.ts(3,13): Error TS1180: Property destructuring pattern expected.]
    message: '...path ommitted...app.ts(3,13): Error TS1180: Property destructuring pattern expected.',
    fileName: '...path ommitted...app.ts',
    line: 3,
    column: 13,
    name: 'TypeScript error' }
  { [TypeScript error: ...path ommitted...app.ts(9,17): Error TS1136: Property assignment expected.]
    message: '...path ommitted...app.ts(9,17): Error TS1136: Property assignment expected.',
    fileName: '...path ommitted...app.ts',
  line: 9,
    column: 17,
    name: 'TypeScript error' }
  [14:39:27] Finished 'browserify' after 547 ms
  </code></pre>