使用来自 HTML 文件的 WebPack 构建包时如何获得 WebStorm 代码完成？

Question

让我们从我的示例开始 src/index.js 文件：

export function foobar() {}

WebPack 配置：

module.exports = [
  {
    mode: 'development',
    entry: './src/index.js',
    resolve: {
      extensions: ['.js'],
    },
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
      library: 'MyBundle',
    },
  }
]

当运行 webpack 创建时 dist/bundle.js。

我创建了一个新的 WebStorm 项目和一个 index.html 文件，我在其中加载了带有 <script src="bundle.js"></script>

的包

现在，如果我输入 MyBundle. 没有完成。

但是，如果我在浏览器中打开 index.html 文件，并在开发控制台中输入 MyBundle.，则会有 foobar() 函数的完成。

有没有办法在 WebStorm 中完成相同的操作？我尝试使用 source map 但没有成功。

Answer 1

MyBundle 在运行时可用，但在您的源代码中没有这样的对象，生成的包被排除在索引之外以获得更好的 performance/navigation/etc。在静态代码分析中解决它需要为 webpack 公开库的方式提供特殊支持，即它的 output.library 属性。如果您错过了它，请随时向 youtrack.

提交功能请求

目前，我只能建议使用 JSDoc 注释让 IDE 了解您的库。喜欢：

/**
 * @namespace MyBundle
 */

/**
 * @memberOf MyBundle
 */
export function foobar() {}

使用来自 HTML 文件的 WebPack 构建包时如何获得 WebStorm 代码完成？

How to get WebStorm code completion when using a WebPack built bundle from HTML file?

javascript

code-completion

webstorm

webpack