在 Webstorm 中为我的自定义 npm 模块（ES6/Babel）自动完成

Question

当我使用material-ui包时，我在 Webstorm (ctrl+space) 中得到了很好的自动完成：

我认为这可能与包包含一个 index.es.js 文件的事实有关：

import _AppBar from './AppBar';
export { _AppBar as AppBar };
import _AutoComplete from './AutoComplete';
export { _AutoComplete as AutoComplete };
import _Avatar from './Avatar';
export { _Avatar as Avatar };
import _Badge from './Badge';
export { _Badge as Badge };
import _BottomNavigation from './BottomNavigation';
...

所以我在我的自定义 npm 模块中生成了我自己的 index.es.js 并将它放在转换的 index.js 旁边：

import {ActionTypes as _ActionTypesElements} from './reducers/elements/elements';
export { _ActionTypesElements as ActionTypes };

import {ActionTypes as _ActionTypesAppState} from './reducers/appState/appState';
export { _ActionTypesAppState as ActionTypesAppState };

import _appStateActions from './reducers/appState/appState_actions';
export { _appStateActions as appStateActions };
...

然而我没有自动完成：

知道为什么吗？

Answer 1

找到答案：

必须在 npm 模块的 package.json 中添加一个jsnext:main字段：

包.json：

 ...
 "module": "./index.js",
 "jsnext:main": "./index.es.js",
 ...

Webstorm 识别包的内部导出。

Answer 2

在 WebStorm 2019.3 中，我遵循以下步骤来强制代码完成（包括自动导入）适用于自定义、自行发布的 NPM 包：

1. 确保项目本身在项目的根目录下有一个 package.json 文件，并且 package.json 在“dependency”对象中包含所需的包。 例如：

{
  "name": "testproject",
  "version": "1.0.0",
  "dependencies": {
    "@yourname/yourpackage": "latest"
  }
}

2. 在 WebStorm 中，选择 File > Invalidate Caches / Restart...

3. 要为包内容启用自动导入，请确保使用包的 JavaScript 文件具有至少一个导出语句。 例如，在以下代码中，存在导出，因此代码完成自动导入包函数 isNil()：

export function init () {
  isNil
}

相比之下，以下代码不包含导出语句，因此不会自动导入 isNil()：

function init () {
  isNil
}

对我来说，要使代码完成在 WebStorm 中适用于我自己的 NPM 包，上述所有三个步骤都是必需的。