jHipster 中的 bower 依赖项是如何组织的？答案

【问题标题】：How are the bower dependencies in jHipster organized?jHipster 中的 bower 依赖项是如何组织的？
【发布时间】：2016-09-13 18:40:44
【问题描述】：

我想将 highstock（highcharts 中的 highstock.js）集成到我的 jHipster 项目中。因此，我在 bower.json 中添加了以下内容：

"dependencies": {
  "highcharts" : "4.2.6",
  "highcharts-ng": "0.0.12"
},
"overrides": {
  "highcharts-ng": {
    "dependencies": {
        "angular": "1.5.8",
        "highcharts": "4.2.6"
    }
  }
}

当我使用此配置构建项目时，gulp 会在 index.html 文件中导入 javascript 依赖项，如下所示：

<script src="bower_components/highcharts/highcharts.js"></script>
<script src="bower_components/highcharts/highcharts-more.js"></script>
<script src="bower_components/highcharts/modules/exporting.js"></script>
<script src="bower_components/highcharts-ng/dist/highcharts-ng.js"></script>

但我实际上需要的只是 highstock.js： Highcharts project overview

我如何控制，这里导入了什么？

【问题讨论】：

也许你可以通过这篇文章得到答案：how-to-include-highcharts-with-bower
不，它实际上没有回答这个问题，因为我的问题是针对 jHipster 的。我想知道 jHipster 中的 gulp 构建如何决定它包含哪个 *.js 文件。在我的情况下，我希望包含 highstock.js 而不是导入的 highcharts.js、highcharts-more.js 和 exporing.js，它们都在同一个文件夹中（如图所示）。

标签： gulp bower jhipster main-bower-files

【解决方案1】：

解决方案在于 jHipster 使用的 gulp 插件“main-bower-files”，并记录在 here。

gulp 构建脚本根据 highcharts/bower.json 文件决定它导入的内容。在 highcharts 的情况下，指定以下内容：

{
  "name": "highcharts",
  "version": "v4.2.6",
  "main": [
    "highcharts.js",
    "highcharts-more.js",
    "modules/exporting.js"
  ]
}

如果你想覆盖它，你可以在你的项目 bower.json 中的“overrieds”部分中这样做，并指定它应该导入哪个 javascript：

"dependencies": {
  "highcharts" : "4.2.6",
  "highcharts-ng": "0.0.12"
},
"overrides": {
  "highcharts": {
    "main": "highstock.js"
  },
  "highcharts-ng": {
    "dependencies": {
      "angular": "1.5.8",
      "highcharts": "4.2.6"
    }
  }
}

【讨论】：