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

【问题标题】：Auto-completion in Webstorm for my custom npm module (ES6/Babel)在 Webstorm 中为我的自定义 npm 模块（ES6/Babel）自动完成
【发布时间】：2017-05-05 13:04:13
【问题描述】：

当我使用 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 };
...

但我没有自动完成：

知道为什么吗？

【问题讨论】：

你有安装任何材质插件吗？在File->Settings->Plugins?你安装你的 npm 模块，比如：npm file-editor install?
@Edwin 我找到了答案，显然我必须在 package.json 中添加一个名为 jsnext:main 的字段。

标签： javascript intellij-idea npm ecmascript-6 babeljs

【解决方案1】：

找到答案：

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

package.json:

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

Webstorm 识别包的内部导出。

【讨论】：

【解决方案2】：

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

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

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

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

export function init () {
  isNil
}

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

function init () {
  isNil
}

对我来说，前面的所有三个步骤对于代码完成在 WebStorm 中为我自己的 NPM 包工作都是必要的。

【讨论】：