Converting ES to JS

[jesse1983]

Hi guys. Actually I'm converting all react projects to MarkoJS (congratulations, it's amazing).

I found a little problem: browser compatibilities. On react projects, my webpack use babel-preset-es2015/babel-preset-react for convert:

query: {
   presets: ['es2015', 'react'],
},

How to do the same approach in MarkoJS?

[larixer]

Hi @jesse1983

The discussion here might be helpful
marko-js/marko#430

So if you turn on babel to transpile .marko files after marko-loader and transpile .js files, you will have ES6 transpilling support with Marko for the browser.

And if your JS-code for some component is inside component.js, you will still have to use module.exports instead of ES6 export, e.g.

class ComponentClass {
  onInput(input) {
    // ...
  }
}

module.exports = ComponentClass;

[jasonmacdonald]

You can use the "add-module-exports" Babel plugin to handle converting "export default" to "modules.exports" for you. That way even your components can be ES6.

[jesse1983]

Take a look my resolution for this issue:

1 - First, I have install Babel Webpack Plugin (https://www.npmjs.com/package/babel-webpack-plugin)

2 - Then, just I added it on webpack.config.js as a PLUGIN e not a LOADER:

/* my webpack.config.js */
plugins: [
   new BabelPlugin({test: /\.js$/, presets: ['es2015']]}
]

I believe that is a approach to solve this case.

[cameronbraid]

@jesse1983 that solution works, but is very slow.

Using babel loader means only individual .js files that change get transpiled. Using BabelPlugin means the whole output asset(s) gets transpiled