I'm using Webpack to transpile my ES6 classes. Let's say there's a Service
class inside the bundle that can be imported by other bundled scripts.
class Service {
constructor() {
//
}
someMethod(data) {
//
}
}
export default Service;
Now I've got a tiny inline script in the HTML body (pseudo-code below) that needs to call a method in that Service
class with data that is inserted server-side using a template engine such as Twig or Blade. Of course creating a new Service
object won't work...
<body>
...
<script>
var data = {{ $json_server_data }};
var service = new Service;
Service.someMethod(data);
</script>
</body>
I'd really like the server data to be available inline as it prevents an additional asynchronous call. And polluting the window namespace with the Service
class feels like throwing away the benefits of a class loader...
How would you tackle this? Suggestions about taking a different approach are also welcome of course.