导入js文件到webpack应用程序js

Question

I have ruby project where I add typescript and webpacker

I have wrote typescript and make rake assets:tsc . So it compiles ts code to js.

Now I have welcome.js at folder `app/assets/javascripts/generated/welcome.js

Here is code of welcome.js

 var HelloWorld = /** @class */ (function () {
    function HelloWorld(name) {
        this.name = name;
    }
    HelloWorld.prototype.print = function () {
        alert("Hello World, " + this.name + "!");
    };
    return HelloWorld;
}());
new HelloWorld('John Doe').print();
//# sourceMappingURL=welcome.js.map

I need to import it to webpacker application.js for example. I cannot find any tutorial how to do this on ruby on rails.

how I can solve this?

UPDATE

I tried to wrote in welcome.js

export default HelloWorld;

And in application.js wrote import HelloWorld from 'generated'

And get this in console

Uncaught Error: Cannot find module "generated" at Object. (application.js:1) at webpack_require (bootstrap 24a076357adc3b41e79b:19) at Object.defineProperty.value (bootstrap 24a076357adc3b41e79b:62) at bootstrap 24a076357adc3b41e79b:62

Answer 1

Is application.js inside /app/javascripts/packs ? If so you should be able to write:

import { HelloWorld } from 'generated/welcome'

at the top of application.js , then you can include it in your layout with:

<%= javascript_pack_tag 'application' %>

I use this syntax in my JS classes:

export class HelloWorld { var HelloWorld = /** @class */ (function () { ...} }

Although you might want different class/function names.