Nuxt.js + Bootstrap-Vue - Загрузка отдельных компонентов и директив

Я работаю над интеграцией библиотеки Bootstrap-Vue в свой проект на основе Nuxt.js. Я прочитал официальную документацию, чтобы начать работу, но, хотя импорт bt-vue как одного модуля работает нормально , Я хотел бы иметь возможность импортировать отдельные компоненты и директивы, чтобы уменьшить размер результирующего файла и сделать мою настройку как можно более эффективной. Документация предоставляет решение только для обычного проекта Vue.js по этой теме, но как я могу написать плагин, который позволил бы мне сделать то же самое с Nuxt?

Я начал с создания bt-vue.ts плагина вот так:

import Vue from 'vue'
import { Card } from 'bootstrap-vue/es/components';

Vue.use(Card);

Я импортировал этот файл в раздел плагинов nuxt.config.js

plugins: [
...
'@/plugins/bt-vue'
...
]

но когда я пытаюсь скомпилировать свой проект, я получаю такую ​​ошибку:

node_modules\bootstrap-vue\es\components\index.js:1
  (function (exports, require, module, __filename, __dirname) { import Alert from './alert';
  ^^^^^^

  SyntaxError: Unexpected token import
  at createScript (vm.js:80:10)
  at Object.runInThisContext (vm.js:139:10)
  at Module._compile (module.js:616:28)
  at Object.Module._extensions..js (module.js:663:10)
  at Module.load (module.js:565:32)
  at tryModuleLoad (module.js:505:12)
  at Function.Module._load (module.js:497:3)
  at Module.require (module.js:596:17)
  at require (internal/module.js:11:18)
  at r (C:\Projects\Wonder\frontend-nuxt\node_modules\vue-server-renderer\build.js:8330:16)
  at Object.bootstrap-vue/es/components (server-bundle.js:5771:18)
  at __webpack_require__ (webpack/bootstrap:25:0)
  at Module../plugins/bt-vue/index.ts (plugins/bt-vue/index.ts:1:0)
  at __webpack_require__ (webpack/bootstrap:25:0)
  at Module../.nuxt/index.js (.nuxt/index.js:1:0)
  at __webpack_require__ (webpack/bootstrap:25:0)

vue.js nuxt.js bootstrap-4 bootstrap-vue
person Andrew Bogdanov    schedule 09.07.2018    source источник
comment
Можете ли вы попробовать это решение от Clarcdo: добавление dom-классов к внешним компонентам ---- const nodeExternals = require ('webpack-node-externals') module.exports = {build: {extend (config, ctx) {if (ctx. isServer) {config.externals = [nodeExternals ({белый список: [/ ^ dom-classes /]})]}}}}   -  person SmelayaPanda    schedule 10.07.2018
comment
Что такое дом-классы? Стоит ли создавать для этого отдельный модуль? Можно ли использовать с Webpack 4? Может быть, я могу использовать функцию extendBuild?   -  person Andrew Bogdanov    schedule 10.07.2018

Ответы (2)


arrow_upward
5
arrow_downward

После долгих исследований и некоторых исправлений в bt-vue lib я нашел решение этой проблемы. Это решение предназначено для Nuxt 2 и не будет работать с Nuxt 1: сначала вам нужно создать плагин:

import Vue from 'vue'
import Collapse from 'bootstrap-vue/es/components/collapse'
import Dropdown from 'bootstrap-vue/es/components/dropdown'

Vue.use(Collapse)
Vue.use(Dropdown)

Мы будем импортировать только те компоненты, которые хотим использовать. Дополнительную информацию об этом можно найти в документации bt-vue в разделе Группы компонентов и директивы как плагины Vue.

ВНИМАНИЕ: я предлагаю держаться подальше от такого синтаксиса импорта:

import { Modal } from 'bootstrap-vue/es/components';

так как он все равно будет импортировать все внутри директивы components и загрязнит ваш окончательный пакет дополнительным JS-кодом, поскольку он не будет правильно раскачиваться (ошибка веб-пакета), и это может помешать всей цели такой настройки, поэтому используйте явный импорт, как указано выше .

затем подключите его в nuxt.config.js:

export default {
  build: {
    transpile: ['bootstrap-vue']
  },
  plugins: ['@/plugins/bt-vue']
}

Как видите, нет необходимости включать модуль, так как мы сами пишем плагин, поэтому проблем с SSR нет! И мы используем новое свойство Nuxt 2 transpile для создания наших модулей es6 bt-vue. Не забудьте указать ссылку на css, поскольку он поставляется отдельно. В своей настройке я просто импортирую файлы SASS из обычного пакета начальной загрузки непосредственно в свой файл index.scss и, как обычно, включаю его в nuxt.config.js.

css: [
    '@/assets/scss/index.scss'
  ]

person Andrew Bogdanov    schedule 20.12.2018
comment
Небольшое напоминание о том, что вам нужно import Vue from 'vue' в начале импорта плагина - person Turqueso; 29.01.2019
comment
Он там, не так ли? - person Andrew Bogdanov; 29.01.2019

arrow_upward
3
arrow_downward

Начиная с версии 2.0.0-rc.14 использование BootstrapVue с Nuxt значительно упростилось за счет внедрения встроенного модуля Nuxt, который избавляет от необходимости создавать плагин вручную. Чтобы получить тот же результат, что и выше, вам просто нужно зарегистрировать модуль bt-vue, а также некоторые специальные настройки внутри nuxt.config.js:

modules: ['bootstrap-vue/nuxt'],
bootstrapVue: {
    bootstrapCSS: false, // here you can disable automatic bootstrapCSS in case you are loading it yourself using sass
    bootstrapVueCSS: false, // CSS that is specific to bootstrapVue components can also be disabled. That way you won't load css for modules that you don't use
    componentPlugins: ['Collapse', 'Dropdown'], // Here you can specify which components you want to load and use
    directivePlugins: [] // Here you can specify which directives you want to load and use. Look into official docs to get a list of what's available
  }

И если вам интересно, как можно загрузить scss для определенных компонентов bt-vue:

@import "~bootstrap-vue/src/variables";
// All bt-vue styles can be imported with this reference
//@import "~bootstrap-vue/src/components/index";

// Importing only styles for components we currently use
@import "~bootstrap-vue/src/components/dropdown/index";
person Andrew Bogdanov    schedule 11.04.2019
comment
Последний плагин BootstrapVue nuxt теперь позволяет импортировать отдельные компоненты и директивы. - person Troy Morehouse; 13.06.2019