可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I wish to use require.js to load CDN hosted bootstrap and jquery.

I realise that this question has been asked before (Refer Steve Eynon's answer to Issue Loading PopperJS and Bootstrap via RequireJS, Even After Using Recommended PopperJS Version), but the posted answers do not work for me.

What I have tried so far

The host html file has content ...

<!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>

File js/market-place.js has content ...

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

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

File js/decision-market-common.js has content ...

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;
  });

Result

Using Chrome as my development browser, I get the following results, at first in the javascript console ...

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

But then I get javascript error:

Failed to load resource: net::ERR_FILE_NOT_FOUND

require.js is trying to load ./popper.js, even after it has succesfully loaded the CDN popper.js ! Why?

回答1:

The answer on this question / at Issue Loading PopperJS and Bootstrap via RequireJS, Even After Using Recommended PopperJS Version didn't work for me.

My scenario was:

Using Bootstrap 4.1.3 (not possible to move to a different version)
Unable to use the bundled version, as I wanted to change the defaults within Popper (specifically, to disable GPU Acceleration to resolve some issues with blurry text in a tooltip)

Using the bundled version, I wasn't able to access the version of Popper "inside" Bootstrap to change the defaults.

Eventually, I came across the "map" option within RequireJS (https://requirejs.org/docs/api.html#config-map). I added this to my RequireJS config:

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

That resulted in RequireJS resolving Popper correctly.

Not a perfect solution and I can't guarantee it will work for anyone else, but I spent a while on this, so I hope this helps someone!

回答2:

And the answer is ...

use bootstrap version 4.0.0-beta. Version 4.0.0-beta works, but any version later (4.0.0 through to 4.1.3) is broken, with respect to requirejs support.

An alternative is to use the bundle version of bootstrap, and then you can use the latest version and don't need to link popper. There is no CDN of bundle bootstrap, so you would need to make a local copy. In this case, file js/decision-market-common.js looks like:

need to explicitly console.log( 'decision-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']
      }
    }
  });

Also, one small point: It is better to use requirejs() rather than require() (, I think?).