如何發布可在WebStorm中自動導入的npm模塊？

Question

我嘗試發布一個簡單的模塊，如下所示：

文件列表是：

|--[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以自動組織import語句，但是它沒有顯示選項卡“ Add import statement ”像Angular2 HttpModulem，FormModule等。

那么我怎么能像其他Angular2的官方模塊那樣通過WebStorm中的鍵Alt + Enter自動導入我自己的模塊呢？ 我錯過了一些關鍵點嗎？

Answer 1

最后，我找到了如何使它工作。

第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導入您的課程