使用外部库进入typescript和webpack项目

Question

我一直非常坚持一些周试图解决这个问题，我真的是在逼一个筋疲力尽的男人......

到目前为止，根据this guide：

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

我已将此添加到webpack.common.js：

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

然后，在我的打字稿组件中，我添加了这个：

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

然而我收到了这个错误：

  

[ts]文件'... / node_modules/@types/stripe/index.d.ts'不是模块。

我也试过了：

import stripePackage from 'stripe';

但是我得到了同样的信息：

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

EXTENSION

到现在为止，我已经卸载了@types/stripe，并在index.html上添加了脚本cdn参考：

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

另一方面，我还在我的打字稿中添加了引用：

import * as Stripe from 'stripe';

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

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上的条带仅用于服务器端绑定，您无法将它们捆绑到浏览器的应用程序。