Добавление сторонних библиотек JS в проект Webpack / Grails / Gradle - PullRequest
Новая
       46

Добавление сторонних библиотек JS в проект Webpack / Grails / Gradle

0 голосов
/ 23 мая 2018

Я пытаюсь разобраться с использованием веб-пакета в сочетании с gradle в среде intellij, используя vue.js в качестве клиентского механизма JS.

Я начал с создания нового проекта grails, используяпрофиль vue: 

grails create-app foobar --profile=vue

Изначально у меня возникли проблемы при интеграции нового главного экрана xyz.vue с библиотекой vue, поэтому я обманул, клонировав созданный файл Welcome.vueс помощью профиля и хакерства до тех пор, пока он не удовлетворит мои потребности.

К сожалению, сейчас я нахожусь на этапе, когда хочу добавить новую библиотеку js: https://github.com/amsik/liquor-tree.

Я попытался установитьон использует npm, как было рекомендовано, но я не могу найти способ включить его в мой файл '.vue'.Каждый раз, когда я пытаюсь, среда выполнения js сообщает мне, что не может найти ни класс Vue, ни дерево vue.Я полагаю, что веб-пакет объединяет все js-модули, управляемые npm, в файл с именем bundle.js, но я нигде не могу найти, что этот файл включен, так что все это немного загадка.

Мой веб-пакет.config.js, как показано ниже: 

var path = require("path")

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

================== Редактировать Энди:

Фатих, мой плохойЯ знаю, но проблема не в импортной стороне вещей.Все это работало нормально - я успешно выполнил 

import LiquorTree from 'liquor-tree'

в своем main.js.Когда я попытался добавить node_modules и его варианты в путь, как вы предложили, я обнаружил ошибку «файл не найден», поэтому я вернулся к форме без префикса пути, который работал просто отлично.Это задокументировано в README, посвященном ликерному дереву, - по ссылке, которую я предоставил.

Чтобы привести в порядок вещи, я все очистил и снова начал с самого начала - и вот, это сработало так, как предполагалось.

Даже несмотря на то, что ваш ответ на самом деле не решил проблему, я думаю, мне придется пометить ваш ответ как правильный.Я действительно не хочу терять свои с трудом заработанные очки репутации, но это моя вина, что я не прояснил вопрос.Хо Хум: '(Старше и мудрее.

1 Ответ

0 голосов
/ 27 мая 2018

Вместо того, чтобы делать это в конфигурации Webpack, вы должны import стороннюю библиотеку в вашем компоненте.См. Фрагмент ниже. 

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

Обязательно обновите путь к папке node_modules для вашего проекта.

...