将第三方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"
    }
}

==================由andy编辑:

法提赫,我的坏,我知道,但问题不在于进口方面.这一切都很好 - 我成功地做了一个

import LiquorTree from 'liquor-tree'

在我的main.js. 当我试图按照你的建议将node_modules及其变体添加到路径时,我得到了一个找不到文件的错误,所以我恢复到没有路径前缀的表单,这个工作正常.这是在自由树README中记录的 - 在我提供的链接中.

为了整理一切,我把所有东西都清理干净,从一开始就重新开始 - 瞧,它的工作原理就是这样.

即使你的答案没有真正解决问题,我想我必须把你的答案标记为正确的答案.我真的不想失去我辛苦赚来的声望点,但这是我自己的错,因为没有让问题更清晰.何哼哼:''(更老,更聪明.

Answer 1

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

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

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