Need help migrating from JSPM to Webpack

Help Requests
21

I’m experimenting with dynamic modules in CLI+require… bear with me

22

OK, I’ve created a proof of concept which does what you need, but it’s not gonna be easy.
Just swapping JSPM with requireJS will not work. Here is what I would do

  • au new to generate a fresh project with requireJS and Typescript (optional :slight_smile: )
  • learn how to configure cli bundling
  • include only core elements and modules to your app bundle

At this point you will have a working app which won’t be able to load anything.
Next

  • create another project (it can be just a duplicate of the one you created above)
  • add a dynamic module to it and configure CLI to bundle its template and view module to a separate bundle
  • build the project and copy the generated dynamic module bundle to the first project
  • CRITICAL BIT: add the following code to the index.html, which will add your bundle to the requirejs
    <script>
  requirejs.config({
    "paths": {
      "home-bundle": "../scripts/home-bundle"
    },
    "bundles": {
      "home-bundle": [
        "home"
      ]
    }
  })
    </script>

Repeating steps 4-7 you can build bundles which can be added to the core app.
Everything above means that you just can’t use Razor for the templates.

As an easier option, stay with JSPM and transpile to ES5 on build, not with JSPM itself. This will improve performance significantly. It’ll still be a bit slower but not drammaticaly.

23

This is just a rough technique, the whole task is massive - let users create new modules, bundle them on a server and save to scripts folder, on navigation add requirejs config script to the DOM and only then perform navigation.

24

Thanks everyone for your suggestions. I’ve decided that the first thing to do is to attempt JSPM bundling. I have opened a new help request for this: JSPM Bundling throws error: `(SystemJS) System.registry is undefined`