将js文件导入webpack应用js答案

【问题标题】：Import js file to webpack application js将js文件导入webpack应用js
【发布时间】：2018-03-06 19:30:22
【问题描述】：

我有 ruby 项目，我在其中添加了 typescript 和 webpacker

我已经编写了打字稿并制作了rake assets:tsc。所以它将ts代码编译成js。

现在我在 `app/assets/javascripts/generated/welcome.js 文件夹中有welcome.js

这里是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

例如，我需要将它导入到 webpacker application.js。我在 ruby on rails 上找不到任何教程。

我该如何解决这个问题？

更新

我试着写在welcome.js

export default HelloWorld;

并在application.js 写了import HelloWorld from 'generated'

然后在控制台中得到这个

未捕获的错误：找不到“生成的”模块在对象。 (application.js:1) 在 webpack_require (引导程序 24a076357adc3b41e79b:19) 在 Object.defineProperty.value (引导程序 24a076357adc3b41e79b:62) 在引导程序 24a076357adc3b41e79b:62

【问题讨论】：

标签： javascript ruby-on-rails ruby webpack

【解决方案1】：

application.js 在 /app/javascripts/packs 里面吗？如果是这样你应该可以写：

import { HelloWorld } from 'generated/welcome'

在application.js 的顶部，然后您可以将其包含在您的布局中：

<%= javascript_pack_tag 'application' %>

我在我的 JS 类中使用这种语法：

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

虽然您可能需要不同的类/函数名称。

【讨论】：

谢谢。这对我帮助很大！