typescript - 在 typescript 和 webpack 项目中使用外部库

Question

几个星期我真的一直在努力解决这个问题，我真的是一个精疲力尽的人......

截至目前，并根据this guide :

npm install stripe --save
npm install @types/stripe --save-dev

我已将其添加到 webpack.common.js 中:

new webpack.ProvidePlugin({
    Stripe: 'stripe'
})

然后，在我的 typescript 组件中添加了以下内容:

import * as Stripe from '@types/stripe';

尽管如此，我还是收到了这个错误:

[ts] File '.../node_modules/@types/stripe/index.d.ts' is not a module.

我也试过:

import stripePackage from 'stripe';

但我收到了同样的信息:

[ts] File '.../node_modules/@types/stripe/index.d.ts' is not a module.

扩展

到目前为止，我已经卸载了 @types/stripe我在 index.html 上添加了脚本 cdn 引用:

<script type="text/javascript" src="https://js.stripe.com/v2/"></script>

另一方面，我还将引用添加到我的 typescript 中:

import * as Stripe from 'stripe';

1. 我正在使用 VSCode 来开发我的 typescript 项目。这对我来说很神奇VSCode可用于在 Stripe 上提供方法目的。
   • VSCode 如何知道在哪里 stripe位于？ (请记住，我只在 <script type=...> 中添加了一个 index.html 标签。这对我来说很神奇。
   • 如何webpack or typescript在 <script> 之间创建链接标记引用到我的 typescript 代码中？我无法弄清楚它是如何提供的...

Answer 1

根据 GitHub 问题 Feature requests: Typescript definitions #296 @types/stripe 的类型定义已经过时。 stripe/index.d.ts说它们适用于 Stripe 2.x，但当前版本 Stripe on npm是 4.15.1。

现在你将不得不在没有类型定义的情况下生活，使用以下方法卸载 @types/stripe:

npm uninstall @types/stripe --save-dev

你总是需要导入模块本身，而不是类型定义。是这样的:

import * as Strip from 'stripe';

此外，webpack.ProvidePlugin 仅用于依赖于全局可用模块的遗留模块，webpack 将简单地将导入添加到尝试使用该全局模块的每个模块。参见 Shimming .如果您只是在自己的代码中使用它，则可以不使用 ProvidePlugin。

注意:npm 上的 Stripe 仅用于服务器端绑定(bind)，您不能将它们捆绑到浏览器的应用中。