使用Require.js加载Stripe.js

Question

我在使用Require.js加载Stripe.js时遇到问题。 我的设置看起来像这样

requirejs.config({
  paths: {
    'stripe': 'https://js.stripe.com/v3/?noext'
  },
  shim: {
    'stripe': {
      exports: 'stripe'
    }
  }
});

这实际上是有效的，也就是说，我可以在dom中看到script标记，但是当我需要它时，它是undefined 。 有什么想法会在这里发生吗？

Answer 1

条带导出的全局变量是带有大写“ S”的Stripe带。 exports需要精确匹配全球出口，这就是案例。

这有效：

 requirejs.config({ paths: { 'stripe': 'https://js.stripe.com/v3/?noext' }, shim: { 'stripe': { exports: 'Stripe' // Uppercase } } }); require(['stripe'], function(s) { // Based on code from https://stripe.com/docs/stripe-js/elements/quickstart const ss = s('pk_test_g6do5S237ekq10r65BnxO6S0'); const elements = ss.elements(); const card = elements.create('card'); card.mount('#card-element'); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.js"></script> <div id="card-element"></div> 

这不是：

 requirejs.config({ paths: { 'stripe': 'https://js.stripe.com/v3/?noext' }, shim: { 'stripe': { exports: 'stripe' // Lowercase } } }); require(['stripe'], function(s) { console.log(s); // undefined }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.js"></script>