Preferred way of working with ES6 modules and CoffeeScript

Question

I have been playing around with the ember-app-kit project and I was running into some issues with ES6 modules and CoffeeScript keywords.

An example of the javascript I'm talking about is:

import Resolver from 'resolver';

and

export default App;

I have been able to bypass the coffeescript compiler errors by escaping lines with "export" and "import" with '`' backticks.

I was getting confused as to how to escape js like this:

export default Ember.Component.extend({
  classNames: ['pretty-color'],
  attributeBindings: ['style'],
  style: function(){
    return 'color: ' + this.get('name') + ';';
  }.property('name')
});

Does anyone know if there is a preferred way of working with CoffeeScript and ES6 modules?

Answer 1

You can assign the component to a var and then escape the export of this var. Like this:

MyComponent = Ember.Component.extend
  classNames: ['pretty-color']
  attributeBindings: ['style']
  style: (->
    "color: #{@get('name')};"
  ).property('name')

`export default MyComponent`