Используйте Webpack, чтобы выставить Vue глобально

Question

Я работаю в старом Rails-приложении, которое было частично перенесено для использования Webpacker и Vue. У нас также есть устаревший скрипт, который загружается через CDN. В этом сценарии тоже нужно использовать Vue, но мы бы не хотели связывать в него Vue, а просто использовали Vue, который уже есть в старом приложении Rails.

Я следил за этим вопросом Как выставить Vue как глобальный объект , и я дошел до этой точки, используя expose-loader, чтобы выставить объект Vue в Vue.default. По сути, экспонированный объект "Vue" на самом деле является Module, а реальный объект Vue вложен в Vue.default.

Я пришел к этому, прочитав все документы и статьи, которые смог найти. Это были самые подходящие из всех, что я мог найти: https://bibwild.wordpress.com/2019/08/01/dealing-with-legacy-and-externally-loaded-code-in-webpacker/

Кажется, это не идеально, и мне интересно, есть ли "более правильный" способ выставления Vue напрямую, т.е. нет вложенный в модуль по умолчанию.

Что я пробовал

Я создал новое приложение Rails 6 с нуля. После добавления зависимостей JS через:

yarn install
yarn add vue
yarn add -D expose-loader
yarn add -D webpack-dev-serer
rails webpacker:install

я добавил конфигурацию expose-loader в config/webpack/development.js

environment.loaders.append('expose', {
  test: require.resolve('vue'),
  use: [{
      loader: 'expose-loader',
      options: 'Vue'
  }]
})

Затем я создал страницу и сделал ее root маршрут.

Затем создал запись JS файл в app/javascript/packs/application.js

import Vue from 'expose-loader?Vue!vue'
console.log({ pack: Vue })

И в макете приложения, под javascript_pack_tag 'application', у меня есть:

<script>
  try {
    console.log({ layout: Vue })
  } catch (error) {
    console.warn('Global Vue not found')
  }
</script>

Теперь в консоли браузера я получаю

{ pack: ƒ Vue(options) }
{ layout: Module
    default: ƒ Vue(options) }

Я также пробовал различные конфигурации в config/webpack/development.js для expose-loader, такие как:

  test: require.resolve('vue/dist/vue.esm.js')
// or
  test: require.resolve('vue/dist/vue.esm.js').default
// or
  test: require.resolve('expose-loader?Vue!vue')
// and different permutations of that.

Другой подход, который я попробовал должен был напрямую вставить Vue в объект окна из моего приложения. js pack pack. Это работает, но кажется неправильным. Есть ли лучший способ?

Вопрос

Как открыть объект, управляемый Webpacker Vue, чтобы его мог увидеть любой сценарий, не управляемый Webpacker? т.е. сделать его доступным для объекта window.