有條件的導入外部package with ESLint

Question

我正在嘗試導入 package 並在我的 Vue 應用程序中使用它，如下所示

import ExternalSamplePackage from 'external-sample-package'

export default {
 directives: {
  ExternalSamplePackage
 }
}

我處於 SSR 模式，所以我想像這樣有條件地導入 package：

if(process.client) {
 import ExternalSamplePackage from 'external-sample-package'
}

但是，我的 es-lint 出現以下錯誤：

> error  Parsing error: 'import' and 'export' may only appear at the top level

如何使用正確的 es-linting 規則導入？

Answer 1

ES6 模塊是 static。 這意味着導入/導出不能出現在函數、條件語句中或包含變量。 導入/導出語句被設計為可靜態分析，因此如果您有條件地想要導入某些內容，則需要運行邏輯，因此如果不運行應用程序就無法對其進行解析。