使用來自 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 中獲得相同的完成？ 我嘗試使用源地圖但沒有運氣。

Answer 1

MyBundle在運行時可用，但您的源代碼中沒有這樣的對象，並且生成的包被排除在索引之外以獲得更好的性能/導航等。 在靜態代碼分析期間解決它需要為 webpack 公開庫的方式提供特殊支持，即為其output.library屬性。 如果您錯過了，請隨時向youtrack提交功能請求。

目前，我只能建議使用 JSDoc 批注讓 IDE 了解您的庫。 喜歡：

/**
 * @namespace MyBundle
 */

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