摘要： 解釋一下“請配置apikey”報錯的原因。

部分Fundebug使用者使用import來匯入js檔案時，出現了"請配置apikey"的報錯，這是由於import提升導致的，下面我會詳細解釋一下這一點。

關於import提升，我們可以參考阮一峰的。

import命令具有提升效果，會提升到整個模組的頭部，首先執行。

foo();

import { foo } from 'my_module';

上面的程式碼不會報錯，因為import的執行早於foo的呼叫。這種行為的本質是，import命令是編譯階段執行的，在程式碼執行之前。

因此，即使我們把import語句寫在後面，它仍然會在其他語句之前執行。

使用者應該清楚，在接入外掛之後，需要配置apikey，如下：

import * as fundebug from "fundebug-javascript";
fundebug.apikey = "API-KEY";

假設我們還需要import一個test.js檔案，這個檔案會丟擲一個Error，如下：

// test.js
throw new Error("test")

一切看起來沒有問題：

// main.js
import * as fundebug from "fundebug-javascript";
fundebug.apikey = "API-KEY";
import "./test"

但是，根據import提升，程式碼的實際執行順序如下：

// main.js
import * as fundebug from "fundebug-javascript";
import "./test"
fundebug.apikey = "API-KEY";

這種情況下，第二行程式碼就會丟擲錯誤，導致apikey複製語句不會執行，從而導致報錯：“請配置apikey”。

出於測試的目的，使用者會去import一個立即報錯的js檔案，類似於前文提到的test.js。但是實際開發中，我們不可能這樣做，否則應用會立即崩潰，更談不上部署了。

我們寫這篇部落格的目的僅僅是解釋一下原因，並分享一個非常簡單的知識點“import提升”。

僅供參考，實際上沒有必要這樣做。

新建一個配置檔案config.js，在這個檔案中配置apikey：

fundebug.apikey = "API-KEY";

import配置檔案：

// main.js
import * as fundebug from "fundebug-javascript";
import "./config"
import "./test"

這種情況下，配置apikey的語句被import代替了，也就不存在所謂"import提升"的問題，Fundebug將可以正常報錯。

最後，感謝Fundebug使用者龍哥的反饋和協助！

import提升導致Fundebug報錯：“請配置apikey”

相關文章