javascript - 将第三方 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 类或 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 及其变体添加到路径时，我收到一个文件未找到错误，因此我恢复为没有路径前缀的形式，效果很好。这是在 liquor-tree README 中记录的 - 在我提供的链接中。

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

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

Answer 1

与其在 Webpack 配置中执行此操作，不如在组件中导入 第三方库。请参阅下面的代码段。

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

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