0

I'm having a Angular-CLI application and I try to bring in a third party dependency in, which is written in Coffee Script. This is what I do in my component: 

const CoffeeWidget = require('coffee-loader!CoffeeWidget');

I thought using a coffee loader would work. But not really. Now I'm able to read the index.coffee, but in my index.coffee I require other coffee files. Like:

Cup = require '../tools/cup.coffee'

But it has problems to ready the cup.coffee and says: You may need an appropriate loader to handle this file type.

Has anyone else faced this problem?

tschaka1904
  • 1,303
  • 2
  • 17
  • 39
  • I don't think that it is just simple as requiring the `.coffee` file, you need to transpile it to TS first. You can use this tool https://www.npmjs.com/package/coffee-script-to-typescript – Vojtech May 03 '17 at 22:51
  • This seems not to be supported anymore by the developers. And how would I do this without running this step always before compiling my app? – tschaka1904 May 04 '17 at 10:16

1 Answers1

3

Since you use coffee-loader directly into your require statement, webpack will use the loader just on the required file.

In order let webpack use coffee-loader on any .coffee file found at any depth, extend the module.rules array in your webpack configuration with:

// Webpack 2 syntax

module.exports = {
  module: {
    rules: [
      {
        test: /\.coffee$/,
        use: [ 'coffee-loader' ]
      }
    ]
  }
}
Andrea Carraro
  • 9,731
  • 5
  • 33
  • 57
  • This has helped a lot! Thanks! But there is still one little thing. The CoffeeScript Widget is a third party tool. Now, it is not requiring its dependency strictly like `Cup = require '../tools/cup.coffee'`, but `Cup = require '../tools/cup`. So basically the `.coffee` is missing. Is the `.coffee` mandatory? The compiler won't compile without it, but I don't want to make changes to a third party lib. – tschaka1904 May 04 '17 at 14:06
  • 1
    Since the module you're importing is a published third party tool, it should come with a precompiled version ready to be imported in vanilla JS. This is usually the best practice with 3rd party code. Does your plugin miss that? – Andrea Carraro May 04 '17 at 14:19
  • `/\.coffee$/` is just a regex which Webpack runs against each requirish-file to chose the loader to use. You might try to write a proper regex to let `coffe-loader` just targeting the files required by your plugin. Also consider to declare [`include` or `exclude` loader options](http://stackoverflow.com/questions/37823764/how-include-and-exclude-works-in-webpack-loader), too. – Andrea Carraro May 04 '17 at 14:26
  • I'm in contact with the developer of the coffee-script lib. In that case, it might be the best to ask him to compile it. I wasn't sure myself, if I've to compile it or if I should receive a compiled version. – tschaka1904 May 04 '17 at 14:47
  • Ah! And just on a site node. You say that such libraries should always be precompiled. Would you say the same for react components? By nature the end with jsx and angular can't really deal with that. – tschaka1904 May 04 '17 at 15:24
  • Yep, the same goes for React components. JSX tags are converted into `React.createElement` calls. – Andrea Carraro May 04 '17 at 15:34
  • Cool! Do you have a reference to the best practices by any chance? So I can point this out a little bit more. – tschaka1904 May 05 '17 at 12:41