如何在打字稿中使用第三方npm模块(Angular2)
问题描述:
是否有任何文档或一步一步的指南介绍了如何做到这一点?如何在打字稿中使用第三方npm模块(Angular2)
我想举个例子:我试图在角度应用中使用包simpl-schema
。我创建了一个新的应用:
ng new ng-ss-test
cd ng-ss-test
npm install --save simpl-schema
在我加入app.component.ts:
let SimpleSchema = require('simpl-schema').default;
现在我已经得到了错误:
ERROR /app/app.component.ts (2,20): Cannot find name 'require'.)
所以,我已经声明要求:
declare var require: any
好的,这实际上是工作。我可以写东西像
const schema = new SimpleSchema({
但我认为那不是做的方式。我仍然有警告:
WARNING in ./~/handlebars/lib/index.js
require.extensions is not supported by webpack. Use a loader instead.
@ ./~/message-box/dist/MessageBox.js 13:18-39
@ ./~/simpl-schema/dist/SimpleSchema.js
@ ./~/simpl-schema/dist/main.js
@ ./src/app/app.component.ts
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
当然,我可以通过运行
dts-gen -m simpl-schema
,但我仍然需要require
线,右创建类型信息SIMPL - 舍姆吗?我想知道在角度上使用第三方npm模块的正确方法是什么。
答
为了使用第三方模块,您需要定义打印稿。每个模块都带有一个typescript d.ts文件,它定义了您可以在库中使用的方法。然而,这并没有任何包含,所以您将需要编写自己的d.ts文件,或点击这里查看DefinitelyTyped的回购:https://github.com/DefinitelyTyped/DefinitelyTyped
只需添加d.ts文件到你的项目,你就可以使用你的库。
Angular CLI有关于添加第三方库的文档https://github.com/angular/angular-cli/wiki/stories-third-party-lib –
好的,这给了我与使用'require'相同的结果。有关'require.extensions'的警告来自'simpl-schema'模块,因此它必须在那里修复。我想知道webpack如何知道它必须从'node_modules/simpl-schema'目录中导入哪些文件。 – MarcS82