Require.js загружает загрузчик CDN и поппер CDN - PullRequest
Новая
       6

Require.js загружает загрузчик CDN и поппер CDN

0 голосов
/ 10 сентября 2018

Я хочу использовать require.js для загрузки размещенной на CDN начальной загрузки и jquery.

Я понимаю, что этот вопрос задавался ранее (см. Ответ Стива Эйнона на Проблема загрузки PopperJS и Bootstrap через RequireJS, даже после использования рекомендуемой версии PopperJS ), но опубликованные ответы у меня не работают.

То, что я пробовал до сих пор

HTML-файл хоста имеет содержимое ... 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script data-main="js/market-place" src="js/lib/requirejs/require.min.js"></script>
</head>   
<body>
 html content etc.
</body>
</html>

Файл js / market-place.js содержит содержимое ... 

console.log( 'market-place.js');

requirejs(['./decision-market-common'], function(){
  console.log( 'common requirement met.');
  require(['bootstrap'], function( bootstrap){
    console.log( 'bootstrap requirement met.');
    });
  });

Файл js / solution-market-common.js содержит содержимое ... 

console.log( 'decision-market-common.js');

requirejs.config({
  paths: {
    jquery   : 'https://code.jquery.com/jquery-3.3.1.slim.min',
    popper   : 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min',
    bootstrap: 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min'
    },
  shim: {
    bootstrap: {
      deps: ['jquery', 'globalPopper']
      }
    }
  });


define( 'globalPopper', ['popper'], function( p){
  window.Popper = p;
  console.log( 'global Popper is set.');
  return p;
  });

Результат

Используя Chrome в качестве браузера, я получаю следующие результаты, сначала в консоли javascript ... 

market-place.js
decision-market-common.js
common requirement met.
global Popper is set.

Но тогда я получаю ошибку JavaScript: 

Failed to load resource: net::ERR_FILE_NOT_FOUND

require.js пытается загрузить ./popper.js, даже после того, как он успешно загрузил CDN popper.js! Почему?

Ответы [ 2 ]

0 голосов
/ 31 октября 2018

Ответ на этот вопрос / на Проблема Загрузка PopperJS и Bootstrap через RequireJS, даже после использования рекомендуемой версии PopperJS у меня не работала.

Мой сценарий был:

  • Использование Bootstrap 4.1.3 (невозможно перейти на другую версию)
  • Невозможно использовать связанную версию, так как я хотел изменить значения по умолчанию в Popper (в частности, отключить ускорение GPU для решения некоторых проблем с размытым текстом во всплывающей подсказке)

Используя встроенную версию, я не смог получить доступ к версии Popper "inside" Bootstrap, чтобы изменить настройки по умолчанию.

В конце концов, я столкнулся с опцией «map» в RequireJS (https://requirejs.org/docs/api.html#config-map). Я добавил это в свою конфигурацию RequireJS: 

map: {
    '*': {
        'popper.js': 'popper'
    }
}

Это привело к тому, что RequireJS правильно разрешил Popper.

Не идеальное решение, и я не могу гарантировать, что оно будет работать для кого-то еще, но я потратил некоторое время на это, поэтому я надеюсь, что это кому-то поможет!

0 голосов
/ 11 сентября 2018

И ответ ...

использовать загрузочную версию 4.0.0-бета. Версия 4.0.0-бета работает, но любая более поздняя версия (от 4.0.0 до 4.1.3) не работает в отношении поддержки requirejs.

Альтернатива - использовать пакетную версию начальной загрузки, и тогда вы можете использовать последнюю версию и не нужно связывать popper. CDN загрузочного пакета не существует, поэтому вам нужно будет сделать локальную копию. В этом случае файл js/decision-market-common.js выглядит так:

надо явно console.log ('solution-market-common.js'); 

requirejs.config({
  paths: {
    jquery   : 'https://code.jquery.com/jquery-3.3.1.slim.min',
    bootstrap: 'lib/bootstrap/bootstrap.bundle.min'
    },
  shim: {
    bootstrap: {
      deps: ['jquery']
      }
    }
  });

Кроме того, одна небольшая мысль: лучше использовать requirejs (), чем require () (я думаю?).

...