Bootstrap: Gulp babel es2015 building Bootstrap 4 – bootstrap/js/src/carousel.js: Unexpected token (219:8)

[gzzz]

Hello.

I'm trying to build Bootstrap 4.0.0 with gulp and babel and got an error: bootstrap/js/src/carousel.js: Unexpected token (219:8).

carousel.js:

_getConfig(config) {
  config = {
    ...Default,
    ...config
  }
  Util.typeCheckConfig(NAME, config, DefaultType)
  return config
}

gulpfile.js:

return gulp
  .src(in)
  .pipe(babel({presets: [['es2015']]}))
  .pipe(concat('bootstrap.js'))
  .pipe(gulp.dest(out))

package.json:

"devDependencies": {
  "babel-plugin-transform-es2015-modules-strip": "^0.1.0",
  "babel-preset-es2015": "^6.16.0",
  …
  "gulp-babel": "^7.0.1",
}

Any ideas how to resolve this and build Bootstrap JS?

[wolfy1339]

That's because you need to use Babel 7 + Babel 7 plugins, because you need object spread.
Also, use the same options for Babel as Bootstrap: https://github.com/twbs/bootstrap/blob/v4-dev/.babelrc.js

[gzzz]

Thanks for advice.

npm install --save-dev babel-preset-env
npm install --save-dev babel-plugin-transform-es2015-modules-strip
npm install --save-dev babel-plugin-proposal-object-rest-spread

return gulp
  .src(in)
  .pipe(babel({
    presets: [['env', {
      loose: true,
      modules: false,
      exclude: ['transform-es2015-typeof-symbol']
    }]],
    plugins: ['transform-es2015-modules-strip', 'transform-object-rest-spread']
  }))
  .pipe(concat('bootstrap.js'))
  .pipe(gulp.dest(out))

After this fixes Bootstrap JS builds fine.