What is the best way to bring in a named SystemJS module from a bundle file?

I have an app.js file that contains two named modules ("foo" and "bar", where "bar" relies on "foo").

Query: How do I load "bar" in the browser?

Please note: I am still learning about SystemJS and finding the documentation a bit overwhelming.

app.js

System.register("foo", [], function(exports_1) {
    "use strict";
    var App;
    return {
        setters:[],
        execute: function() {
            App = (function () {
                function App() {
                    this.bar = 'Hello world.';
                    console.log(this.bar);
                }
                return App;
            })();
            exports_1("App", App);
            ;
        }
    }
});

System.register("bar", ["foo"], function(exports_1) {
    "use strict";
    var App;
    return {
        setters:[],
        execute: function() {
            App = (function () {
                function App() {
                    this.bar = 'Many a little makes a mickle.';
                    console.log(this.bar);
                }
                return App;
            })();
            exports_1("App", App);
            ;
        }
    }
});

Answer №1

Achieved the desired outcome with the following steps:

  • Inserted the <script src="app.js"> element into my main file.
  • Included System.import('bar'); on the page as well.

I am curious if this method is considered standard or recommended.

Edit:

The drawback of this method is that I require two different approaches for development and production.

During development, I avoid adding the <script> tag and instead import the module using System.import('path/app.js');

Answer №2

Utilizing a minimalistic seed can be beneficial as it presents a straightforward functioning model. This seed offers options for both PRODUCTION and DEV MODE, eliminating the need for two separate strategies. Instead, you simply select whether to run it bundled or not.

Give it a go by running:

npm install -g slush-jspm-react-seed

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing the 404 error with my socket.io connection?

I'm currently in the process of recreating a basic chat application that was originally shared on the official website of socket.io. Within content.js, I have created the following module: var app = require('express'); var router = app.Ro ...

To successfully use Router.use(), you must provide a valid middleware function. How can we resolve this issue of passing undefined as

I have developed a CRUD application using node.js and now I need to incorporate another node project as a microservice. To send HTTP requests to the other node project, I am utilizing the axios npm module. However, when I run the code, I keep encountering ...

The Rails application is loading JavaScript three times

I am encountering an issue with my ajax function where it is being triggered multiple times upon click instead of just once. $(document).on('click', '.newGameItem', function() { console.log('start click event'); var a ...

The Navbar in my React Material UI app is being covered by the Drawer component. Can someone guide me on how to fix

I am facing an issue where the drawer is overlaying my navbar instead of disappearing behind it when opened. I tried adjusting the z-index in my styles but it doesn't seem to be working as expected (see screenshot). The z-index for the navbar is set h ...

Using Wordpress with Gravity Forms Ajax and Swup JS for dynamic form submissions

For page transitions and AJAX content changes, I have implemented swup.js. However, Gravity forms is not properly handling the AJAX request and the form stops working after transitioning. To reinitialize my scripts upon page load, I am using the following ...

Challenges encountered with AngularJS Chart file maintenance

I'm pretty new to working with Angular, and I decided to customize a template for angular charts. However, when I saved the files and tried to open the html file, nothing showed up in my browser. I initially thought it could be due to typos or errors ...

Dropdown Pattern with React CTA Modal

While using MaterialUI's ButtonGroup for a dropdown menu, I encountered an issue trying to set up a series of CTAs that are easily interchangeable within it. The goal is to have all components reusable and the choices in the dropdown dynamic. const C ...

Adding a file attachment and preview feature within a text area: a step-by-step guide

I have been working on a chat box that includes emojis and a file attachment button. While the emojis are functioning correctly, I am experiencing difficulty with the file attachment preview not showing in the text area. Are there any suggestions or plugin ...

Starting AngularJS from the Cordova device ready event without using automatic tools

I am currently using Cordova version 3.3.1-0.4.2 along with Angular 1.2.13 My goal is to manually bootstrap Angular once the 'deviceready' event in Cordova is triggered. During my testing on a Nexus 5 with the command cordova run android, I enc ...

Anticipated to provide a value within the arrow function for array-callback-return

As someone who is new to web development and working with React.js, I am encountering an issue with rendering divs in the componentDidMount method. Despite my efforts, the divs are not being rendered and I keep receiving a warning message stating "Expect ...

Tips for removing files from an <input type='file' /> element with jQuery or JavaScript

I have multiple <input type='file' /> fields in my file without any HTML form. I need to clear the attached files from a specific <input type='file' />, not all of them. Using $('input').val(""); clears all the < ...

Tips on sending a form to the server with ajax technology

I'm struggling with sending a button id to my server through ajax in order to submit a form without having to constantly reload the page every time I click on a button. Unfortunately, it's not working as expected and I can't figure out why. ...

Ways to showcase multiple elements using introjs

I am attempting to highlight multiple DOM elements using the JS library intro.js, but I am encountering an issue. It seems that I can only define one element to be highlighted at a time. introjs.setOptions({ steps: [ { ...

Is there a way to customize the color of an element within CardHeader in MUI?

Is there a way to customize the colors of {note.title} and {note.category}? I have attempted to do so by creating a theme: const theme = createTheme ({ palette: { category: { color: blue } } }) Unfortunately, this appro ...

JavaScript capable of storing vast quantities of data

Currently, I am receiving file chunks in byte format from my server and combining them into one variable on my frontend for downloading later. Unfortunately, I am unable to modify the server setup which sends files sliced into chunks. The issue arises whe ...

How can you spot the conclusion of different lines that refuse to remain in place?

Currently, I am facing a jquery issue that has left me stumped. The website I am working on is structured as follows: <div class="Header"></div> <div class="main"><?php include('content.html'); ?></div> <div clas ...

Tips for assigning a personalized value to an MUI Switch when it is in the off position

I am currently utilizing the MUI Switch component to create an On-Off button. I have manually set the value as "on" and it is functioning correctly when the switch is in the true state. However, there doesn't seem to be an option to change the default ...

Misconception about the usage of jQuery's .each() function clarified with an illustrative example

Problem Description (See Fiddle): When clicking on the red boxes, they transform into kittens and display an alert with the current value of i. Clicking on a large fading kitten will reset everything. I am puzzled as to why alert(i) is triggering multipl ...

Exploring the possibilities of integrating Storybook/vue with SCSS

After creating a project with vue create and installing Storybook, everything was running smoothly. However, as soon as I added SCSS to one of the components, I encountered the following error: Module parse failed: Unexpected token (14:0) File was process ...

guide to extracting data from JSON using PHP and JavaScript

http://gdata.youtube.com/feeds/users/LadyGagaVEVO/uploads?alt=json&max-results=10&format=5 I'm interested in extracting the video thumbnail and link from the above URL using PHP and JavaScript. However, I am unsure of how to accomplish this. ...