karma-jspm icon indicating copy to clipboard operation
karma-jspm copied to clipboard

Module compilation when import from ES6

Open davinkevin opened this issue 8 years ago • 0 comments

Hi,

I can't provide an full example of code to reproduce the error, so I will try to give a maximum of details. Our project is build upon this angular-jspm-seed : https://github.com/davinkevin/angularjs-jspm-seed

We have written in ES6 (stage 0) some external modules in another package and want to import them in our project. We have followed the documentation about it here : https://github.com/jspm/jspm-cli/blob/master/docs/publishing-packages.md#writing-a-library-or-application-for-usage-just-with-jspm

This module contains no main entry, just some service files written in ES6. FYI, we use this module as 'common shared component' between many projects.

So, we import them with that in the package.json :

jspm {
...
"dependencies": {
      "custom-providers": "corp:xxxx/SearchProviders@master",
    },
...

In the module custom provider, we have the following declaration in the package.json:

"jspm": {
    "main" : false,
    "format" : "es6",
    "registry": "jspm",
    "ignore": [ "**/*.spec.js" ],
    "directories": {
      "baseURL": "public",
      "lib": "public/app"
    },
    "dependencies": {
      "angular": "github:angular/bower-angular@^1.4.7",
      "angular-mocks": "npm:angular-mocks@^1.4.7"
    },
    "devDependencies": {
      "babel": "npm:babel-core@^5.8.24",
      "babel-runtime": "npm:babel-runtime@^5.8.24",
      "core-js": "npm:core-js@^1.1.4"
    }
  },

We don't have any problem when we try to run (in dev mod) the application (babel compilling in the browser) nor in globally build (with JSPM.builder) execution.

But, when we run our test, the following code :

import {Module, Service} from '../../../decorators';
import ServiceA from 'custom-providers/ServiceA/ServiceA';

console.log(ServiceA); /* <-- for example only ! */

@Module({
  name : 'a.b.c',
  modules: [ ServiceA ]
})
@Service('aService')
export default class aService {
...
}

we are waiting a log containing the Class ServiceA (like any other import in our project), but we are facing an object Module{default : function ServiceA{...}}

PhantomJS 1.9.8 (Mac OS X 0.0.0) LOG: Module{default: function ServiceA($q) { ... }}

FYI : The Module word in the log is not linked to our decorator, we try to change the name of the decorator, and the log are still the same, it's an element of type Module.

After testing multiple solution, we find out if we activate the babel processing on our custom-providers dependencies, the problem disapear, with this configuration in the karma.conf.js:

... 
preprocessors: {
      'app/**/!(*.spec).js': ['babel', 'coverage'],
      'jspm_packages/corp/**/*.js' : ['babel']
    },
...

So we are a bit lost, we have followed all the guidelines to build an ES6 codebase and use it in dependency management, but we are facing this problem only during karma testing.

Thanks for your help

Davin Kevin /cc @aubm

davinkevin avatar Dec 15 '15 11:12 davinkevin