Enhancement: ES6 compilation

[good-idea]

I write all of my JS in ES6, but my webpack skills aren't hot enough to try to mess with your super clean config!

(Otherwise, i'm super impressed with Fabrica, the amount of headache you are saving the internet is endless!)

[tiojoca]

Thanks a lot @sqbiz! We're considering adding this. In the meantime, gulpfile.js is meant to be changed to fit the projects' needs so you can try and add this yourself to your project if you like.

Just add the necessary dependencies in dev/:

yarn add --dev babel-loader babel-core babel-preset-env webpack

or if you're using npm:

npm install --save-dev babel-loader babel-core babel-preset-env webpack

then in gulpfile.js change the webpack-stream call to:

.pipe(webpack({
    output: {filename: 'main.js'},
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['env']
                }
            }
        }]
    }
}, require('webpack')))

To avoid JSHint warnings you should also add a .jshintrc file in dev/ with: { "esnext": true }

Webpack should now use the Babel loader to transpile your JS.

[good-idea]

Thank you!!

✘ www.standard-quality.biz ✿

On 12 May 2017, at 4:02, tiojoca wrote:

Thanks a lot @sqbiz! We're considering adding this. In the meantime, gulpfile.js is meant to be changed to fit the projects' needs so you can try and add this yourself to your project if you like.

Just add the necessary dependencies in dev/:

yarn add --dev babel-loader babel-core babel-preset-env webpack

or if you're using npm:

npm install --save-dev babel-loader babel-core babel-preset-env 
webpack

then in gulpfile.js change the webpack-stream call to:

.pipe(webpack({
  output: {filename: 'main.js'},
  module: {
      rules: [{
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
              loader: 'babel-loader',
              options: {
                  presets: ['env']
              }
          }
      }]
  }
}, require('webpack')))

To avoid JSHint warnings you should also add a .jshintrc file in dev/ with: { "esnext": true }

Webpack should now use the Babel loader to transpile your JS.

-- You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub: https://github.com/fabrica-wp/fabrica-dev-kit/issues/9#issuecomment-301048170

[good-idea]

I had to do this a little differently to get it working, my setup is:

var webpackConfig = {
  entry: path.scriptMain,
  output: { filename: 'main.js' },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        }
      }
    ]
  },
}

function reportError(error) {
  console.error(error.message);
  this.emit('end');
}

function scripts(done) {
  return gulp.src(path.scriptMain)
  .pipe(jshint())
  .pipe(jshint.reporter())
  .pipe(changed(base.theme + dest.scripts))
  .pipe(
    webpack(webpackConfig)
    .on('error', reportError)
  )
  // ...

versions in package.json:

  "devDependencies": {
   // ...
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-env": "^1.5.1",
    "webpack-stream": "^3.2.0"
   // ..
   }

Edit: small update for error handling, also, webpack config required an 'entry' property, otherwise when I updated modules that were referenced in main.js, it wouldn't compile.