jspm / registry

The jspm registry and package.json override service
https://jspm.io
229 stars 256 forks source link

Newbie - Using JSPM with legacy project #979

Closed riyunoa closed 7 years ago

riyunoa commented 7 years ago

I'm trying to integrate JSPM with a legacy ES5 project (code is not in modules) which currently loads dependencies via <script> tags. I'm new to ES6 and modules so this is all a bit confusing. I'm trying to get JSPM to work with stacktrace-js.

To my knowledge, JSPM uses SystemJS. To import modules, we'd do System.import, which returns a promise. My problem with this is that the other dependencies in the <script> tags expect dependencies defined synchronously in the global scope. I tried using import stacktrace-js for example, but running it in the browser it complains that require is not defined.

I'm pretty sure I'm missing something - what would the right way be to use JSPM with a legacy project? Do I have to refactor the existing scripts so that they are in modules, and then load them with System.import? Thanks in advance.

aluanhaddad commented 7 years ago

You can most definitely use JSPM + SystemJS to load global scripts. You need to set the package config. If you could upload a small repo, I would be happy to take a look at it.

riyunoa commented 7 years ago

In the end, I created a js file loading all the stuff I wanted globally, bundled it into a self-executing bundle and included it in my footer. Not sure if this is the right way to do it, but it works....

import _ from 'lodash';
import StackTraceService from '/modules/stacktrace/service/StackTraceService';

var stackTraceService = new StackTraceService();

export { stackTraceService };