如何发布可在WebStorm中自动导入的npm模块?

时间:2017-02-04 07:36:15

标签: node.js angular npm webstorm

我尝试发布一个简单的模块,如下所示:

文件列表是:

|--[src]
|    |--[share]
|          |--share.moduel.ts
|          |--index.ts
|
|
|--package.json
|--index.ts

的package.json

{
  "name": "my-common",
  "version": "1.0.0",
  "description": "",
  "main": "index.ts",
  "typings": "index.ts",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

index.ts

export { ShareModule } from './src/share/index';

的src / share.module.ts

import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {FormsModule} from "@angular/forms";

@NgModule({
  imports: [
    CommonModule,
    FormsModule
  ],
  declarations: [],
  exports: [CommonModule,FormsModule]
})
export class ShareModule { }

的src / index.ts

export { ShareModule } from './share.module';

在我发布npm模块,然后发布npm install my-common之后,我尝试在代码' ShareModule'上按 Alt + Enter 为了自动整理导入声明,但它没有显示标签" 添加导入声明 "其作用类似于Angular2 HttpModulem,FormModule等。

那么我怎样才能像其他Angular2的官方模块一样,通过WebStorm中的键 Alt + Enter 自动导入我自己的模块?我错过了一些关键点吗?

1 个答案:

答案 0 :(得分:0)

最后,我找到了如何使它发挥作用。

第1步 在**/src/**文件夹中创建两个文件,如下所示:

index.d.ts index.ts

第2步 编辑index.d.ts 您显示导出要使用的类 Alt + Enter 以在WebStrom中导入

例如

export declare class ShareModule {
}

第3步 编辑你的index.ts如下:

export {ShareModule} from './share/share.module';

第4步 在 / 文件夹中创建两个文件,如关注

index.ts:

export * from './src/index';

index.d.ts:

export * from './src/index'

最后,文件应该如下:


    |--[src]
    |    |--[share]
    |    |      |--share.moduel.ts
    |    |--index.ts
    |    |--index.d.ts
    |
    |
    |--package.json
    |--index.ts
    |--index.d.ts

现在您可以通过 Alt + Enter

导入您的课程