Different ways to call an ES6 class that is bundled in the <script> tag

Question

Different ways to call an ES6 class that is bundled in the <script> tag

Currently, I am utilizing Webpack to transpile my ES6 classes. Within the bundle, there is a Service class that can be imported by other bundled scripts.

class Service {
    constructor() {
        //
    }

    someMethod(data) {
        //
    }
}

export default Service;

Now, I have a small inline script in the HTML body (pseudo-code provided below), which needs to invoke a method in the Service class with data inserted server-side via a template engine like Twig or Blade. Naturally, creating a new instance of the Service won't suffice...

<body>
    ...
    <script>
        var data = {{ $json_server_data }}; 

        var service = new Service;

        Service.someMethod(data);
    </script>
</body>

I am keen on having the server data readily available inline to avoid an extra asynchronous call. The idea of cluttering the window namespace with the Service class seems counterproductive considering the advantages of a class loader...

How do you propose dealing with this? Any suggestions for alternative approaches are appreciated as well.

javascript ecmascript-6

Answer 1

Answer №1

If you want your Service class to be accessible outside of the bundled javascript scope, you'll need to make it global by attaching it to the window object. Here's how you can do that:

// Service.js
class Service {
    constructor() {
        // Constructor code here
    }

    someMethod(data) {
        // Method implementation here
    }
}

window.Service = Service;

export default Service;


// Usage
let myService = new Service();

Answer 2

If you want your Service class to be accessible outside of the bundled javascript scope, you'll need to make it global by attaching it to the window object. Here's how you can do that:

// Service.js
class Service {
    constructor() {
        // Constructor code here
    }

    someMethod(data) {
        // Method implementation here
    }
}

window.Service = Service;

export default Service;


// Usage
let myService = new Service();

Different ways to call an ES6 class that is bundled in the <script> tag

Answer №1

Similar questions

What is the best way to generate a consistent and unique identifier in either Javascript or PHP?

Maintain MUI Autocomplete in the open state even after making a selection from the

The webpage is failing to refresh even after using history.push()

Two functions are contained within an object: Function A and Function B. Function A calls Function B from within its own code

Running npm commands, such as create-react-app, without an internet connection can be a

Update a div in PHP using the data received from an AJAX response

Clicking the ASP button does not trigger the onclick event when a web user control is included on the webpage

Error: The function cannot be performed on _nextProps.children

HTML - one div's child element takes precedence over another div

Concealing the TinyNav Drop-Down Menu

What could be the reason my vue.js button is not generating a fresh textarea?

Error encountered when attempting to add document to Firebase database: admin:1. An unexpected FirebaseError occurred, stating that the expected type was 'Na', but it was actually a custom object

Obtaining a group object when the property value matches the itemSearch criteria

`Testing the functionality of javascript/jQuery events using Jasmine`

Spread the picture on social media using Progressive Web App

What is the rationale behind assigning a random value to the `(keyup)` event in order to update template local variables in Angular2?

Guide on exporting values from a Promise within an imported module

Challenges faced with password hashing in Express.js

Convert the existing JavaScript code to TypeScript in order to resolve the implicit error

Populate a dropdown menu in jQuery with options generated from an array