如何在 Jhipster 4 中使用常规的 3rd 方 js 库？答案

【问题标题】：How to use regular 3rd party js libs with Jhipster 4?如何在 Jhipster 4 中使用常规的 3rd 方 js 库？
【发布时间】：2017-05-27 01:27:03
【问题描述】：

我将 Jhipster 4 与 Angular 2 一起使用，并且需要在我的项目中使用第 3 方库，但是该库不在 npm 上并且没有 .d.ts 文件。我需要直接包含js。在 vendor.ts 中导入适用于通过 npm 安装的库，但不适用于我的 js，如何在我的项目中使用此文件？

【问题讨论】：

标签： javascript angular jhipster

【解决方案1】：

我现在也在尝试解决这个问题..我实际上无法通过 yarn 安装库来通过将它们导入 vendor.ts 文件来工作..

我当前的解决方法（...直到我能找到正确的方法）是将我需要的 .js 文件复制到 src/main/webapp/content/js/ 并从 webpack.common 中引用它。 CopyWebpackPlugin 插件中的js：

在 webpack.common.js 的 plugins 下，我添加了 CopyWebpackPlugin 的入口：

new CopyWebpackPlugin([
            { from: './node_modules/core-js/client/shim.min.js', to: 'core-js-shim.min.js' },
            { from: './node_modules/swagger-ui/dist', to: 'swagger-ui/dist' },
            { from: './src/main/webapp/swagger-ui/', to: 'swagger-ui' },
            { from: './src/main/webapp/favicon.ico', to: 'favicon.ico' },
            { from: './src/main/webapp/robots.txt', to: 'robots.txt' },
            { from: './src/main/webapp/i18n', to: 'i18n' },
            { from: './src/main/webapp/content/js/FooLib.js', to: 'FooLib.js'}
]),

然后在webapp/index.html中添加一个import

    <script src='FooLib.js'></script>

然后在我使用它的组件中声明它：

declare var Foo: any;

【讨论】：

它可以在不声明 Foo 变量的情况下工作。您也可以像这样导入整个文件夹：{ from: './src/main/webapp/content/js/', to: 'content/js/'}。然后通过导入js文件()来声明脚本
嗨，大卫，我非常感谢您的这项工作。您是否偶然发现了另一种干净的解决方案？我现在讨厌 MDB，因为它与 JHipster 不兼容 :)

【解决方案2】：

虽然不太理想，但您可以使用普通的旧 js。像往常一样在index.html 中链接它，然后在任何需要使用它的TypeScript 代码中将库的declare 放在文件顶部。所以，例如：

import { Component } from '@angular/core';
declare myAwesomeJsLibrary: any;

@Component(/* brevity*/)
export class AppComponent {
  constructor() {
    myAwesomeJsLibrary.doSomethingAwesome();
  }
}

当然，它不会为您提供任何类型的自动完成功能，但如果您真的需要，您始终可以为它创建自己的接口和 d.ts 文件。这样你至少可以让它工作。

【讨论】：

但是情况是Jhipster使用的是webpack，建议在vendor.ts里面导入js。我这样做并尝试声明该库，但是当我尝试使用它时却未定义。我猜它没有被包含在 index.html 中
这很有趣。尝试直接在 index.html 中链接它，看看它是否有区别？这可能有助于诊断问题 - 即：是与 vendor.ts 还是与 declare.
直接在index.html中链接我无法加载js的正确位置。 webpack创建了一个运行在9090端口的微服务器，并使用自动重载，所以它不会获取直接添加到索引中的js