将第三方 JS 库添加到 Webpack/Grails/Gradle 项目

Question

我正在尝试在使用 vue.js 作为客户端 JS 引擎的 intellij 环境中结合使用 webpack 和 gradle。

我开始使用 vue 配置文件构建一个新的 grails 项目：

grails create-app foobar --profile=vue

最初，我在将新的 xyz.vue 主屏幕与 vue 库集成时遇到了问题，所以我通过克隆创建的 Welcome.vue 文件作弊通过个人资料并对其进行黑客攻击，直到它满足我的需求。

不幸的是，我现在正处于要添加新js库的阶段：https://github.com/amsik/liquor-tree。

我已尝试按照建议使用 npm 安装它，但我找不到将它包含在我的“.vue”文件中的方法。每次尝试时，js 运行时都会告诉我它无法找到 Vue class 或 vue-tree。我相信 webpack 将所有 npm 管理的 js 模块组合到一个名为 bundle.js 的文件中，但我找不到包含该文件的任何地方，所以这有点神秘。

我的webpack.config.js如下图：

var path = require("path")

module.exports = {
    "entry": "./lib/index.js"
,   "output": {
        "path": __dirname + "/build"
    ,   "filename": "xxhash.js"
    ,   "library": "XXH"
    ,   "libraryTarget": "umd"
    }
}

================== 安迪编辑：

Fatih，我的错，我知道，但问题不在进口方面。这一切都很好 - 我成功地完成了

import LiquorTree from 'liquor-tree'

在我的 main.js 中。当我尝试按照您的建议将 node_modules 及其变体添加到路径时，我收到一个文件未找到错误，因此我恢复为没有路径前缀的形式，效果很好。这是在我提供的 link 中的 liquor-tree README 中记录的。

为了收拾东西，我清理了所有东西并从头开始 - 你看，它按预期工作。

虽然您的回答并没有真正解决问题，但我想我必须将您的回答标记为正确答案。我真的不想失去来之不易的声誉点，但这是我自己的错，因为我没有把问题说清楚。呵呵 :'( 越老越聪明

Answer 1

您应该 import 组件中的第三方库，而不是在 Webpack 配置中执行此操作。请参阅下面的代码段。

<script>
  import thirdPartyLibrary from '../../node_modules/library-name/dist/library';
</script>

确保将路径更新为项目的 node_modules 文件夹。

将第三方 JS 库添加到 Webpack/Grails/Gradle 项目

Adding 3rd party JS libs to Webpack/Grails/Gradle project

javascript

gradle

vuejs2

webpack-2