Question

我正在使用Webpack来转换我的ES6类。假设捆绑包中有一个 Service 类，可以由其他捆绑脚本导入。

＆＃xA;＆＃xA;

  class Service {＆＃xA; constructor（）{＆＃xA; //＆＃XA; }＆＃XA;＆＃XA; someMethod（data）{＆＃xA; //＆＃XA; }＆＃xA;}＆＃xA;＆＃xA;导出默认服务;＆＃xA;

＆＃xA;＆＃xA;

现在我有一个很小的内联脚本在HTML主体（下面的伪代码）中，需要使用模板引擎（如Twig）或服务器端插入的数据调用该 Service 类中的方法。刀。当然，创建一个新的 Service 对象将不起作用...

＆＃xA;＆＃xA;

 ＆lt; body＆gt;＆＃xA; ...＆＃XA; ＆LT;脚本＆GT;＆＃XA; var data = {{$ json_server_data}}; ＆＃XA;＆＃XA; var service = new Service;＆＃xA;＆＃xA; Service.someMethod（数据）;＆＃XA; ＆lt; / script＆gt;＆＃xA;＆lt; / body＆gt;＆＃xA;

＆＃xA;＆＃xA;

我真的希望服务器数据可以内联使用它阻止了额外的异步调用。使用 Service 类污染窗口命名空间感觉就像丢弃了类加载器的好处......

＆＃xA;＆＃xA;

你会如何解决这个问题？当然也欢迎采取不同方法的建议。

＆＃xA;

Answer 1

您的服务类在捆绑的javascript范围之外无法使用。所以你可能想要它global，你可以通过将它附加到窗口对象来实现。

＆＃13;

// Service.js
class Service {
    constructor() {
        //
    }

    someMethod(data) {
        //
    }
}

window.Service = Service;

export default Service;


// usage
let myService = new Service();

＆＃13;

如何在内联<script>中访问捆绑的ES6类

1 个答案: