Как интегрировать внешний js в файл main.js в Webpack vue.js?

Question

Я хочу интегрировать загруженный файл javascript из исходной папки.

Учтите, что файлы css и js существуют в пути.

Из чего я собираюсь интегрировать CSS в main.js Я просто добавляю

require('./vendor/bootstrap/css/bootstrap.min.css')

, но как добавить файл js?Когда я добавляю js-файлы таким же образом

require('./vendor/jquery/jquery.min.js')
require('./vendor/bootstrap/js/bootstrap.bundle.min.js')

, я получаю сообщение об ошибке

./src/vendor/bootstrap/js/bootstrap.bundle.min.js
Module not found: Error: Can't resolve 'jquery' in '/home/<cool path>/ClientVueJs/src/vendor/bootstrap/js'
 @ ./src/vendor/bootstrap/js/bootstrap.bundle.min.js 14:125-142
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

Answer 1

Добавьте псевдоним для jquery в конфигурацию веб-пакета (и удалите require строку require('./vendor/jquery/jquery.min.js')), поскольку начальная загрузка зависит от модуля 'jquery':

    module.exports = {
    //...
        resolve: {
            alias: {
                jquery: path.resolve(__dirname, 'src/vendor/jquery/jquery.min.js')
            }
        }
    };

Эта привязка позволяет веб-пакету разрешать require('jquery') изфайл начальной загрузки.

Если вам нужно сопоставить библиотеку с дополнительными переменными, такими как $, вы должны использовать ProvidePlugin, проверьте комментарий @ Arseniy-II со ссылкой.