使用 Require.js 加载 Stripe.js答案

【问题标题】：Load Stripe.js with Require.js使用 Require.js 加载 Stripe.js
【发布时间】：2018-06-21 20:16:31
【问题描述】：

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

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

这确实有效，也就是说，我可以在 dom 中看到脚本标签，但当我需要它时，它是 undefined。有什么想法可以在这里发生吗？

【问题讨论】：

它实际上是导出Stripe而不是stripe吗？用大写的“s”？

标签： javascript requirejs commonjs stripe.js

【解决方案1】：

条带导出的全局是Stripe，带有大写“S”。 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
});

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.js"&gt;&lt;/script&gt;

【讨论】：