Включая статические активы из модулей

Question

Я пробовал (на данный момент) последнюю версию vue-cli и столкнулся с проблемой импорта статических ресурсов. Моя установка - это по умолчанию свежий проект по умолчанию, в котором не выбрано ничего, кроме vuex, и моей первой целью было получить скучный шаблон с запущенным семантическим интерфейсом. Это также подразумевает jQuery с семантическим интерфейсом в зависимости от него.

Для этого я добавил этот раздел скрипта в основной файл App.vue

<script>
    require('~/jquery/dist/jquery.min.js');
    require('./semantic/dist/semantic.js');
</script>

.. следуя правилам преобразования URL, объясненным здесь . Моя (частичная) структура папок:

node_modules
    jquery
        dist
            jquery.min.js
src
    semantic
        dist
            semantic.min.js

Запуск npm run serve находит семантику, но не jquery. Может кто-нибудь сказать мне, почему этот предложенный метод включения статических активов не работает в этом случае?

Изменить для уточнения: Мой вопрос явно касается предложенного метода импорта и правил преобразования URL. Для тех, кому нужен какой-то способ заставить это работать, я в настоящее время использую это в качестве обходного пути:

<script>
    import jQuery from 'jquery';
    window.$ = window.jQuery = jQuery;
    require('./semantic/dist/semantic.js');
    export default {
    }
</script>

Answer 1

Если вы используете webpack. Есть еще один способ включить jQuery в качестве глобальной переменной, используя ProvidePlugin. Вы можете добавить в свой webpack.base.conf.js

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jquery: 'jquery',
      'window.jQuery': 'jquery',
      jQuery: 'jquery'
    })
  ]
}

Если вы используете Eslint, вам нужно добавить к .eslintrc.js

module.exports = {
  globals: {
    "$": true,
    "jQuery": true
  },
  ...