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

Question

我将尝试在IntelliJ环境中，使用Vue.js作为客户端JS引擎，结合Gradle和Webpack的使用方法。起初，我使用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"
    }
}

================== Edit by andy:

Fatih，我的错，但问题不在导入方面。这一切都很好 - 我成功地完成了一个

相关的操作，但是在导出数据时遇到了问题。我检查了代码并发现有一个错误。我修复了它并重新运行了代码，现在一切正常了。

import LiquorTree from 'liquor-tree'

在我的main.js中，当我尝试像你建议的那样将node_modules及其变体添加到路径中时，出现了文件未找到错误，因此我恢复了没有路径前缀的形式，这也能正常工作。这正如我在提供的链接中，在liquor-tree README中所述。

为了整理一切，我清空了所有内容，从头开始 - 哦，它按照预期工作了。

即使你的答案实际上没有解决问题，我还是得把它标记为正确的答案。我真的不想失去我辛苦赚来的声望分，但这是我的错，我没有让问题更清楚。嗯嗯 :'( 老而有智。

- Andy

Answer 1

不要在Webpack配置中这样做，你应该在组件中import第三方库。请参见下面的代码片段。

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

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

- Fatih Acet

---

没有真正解决问题，但这是最有用的回复 :-) - Andy