SharePoint Framework 在web部件中使用已存在的JavaScript庫 - JavaScript庫的格式

Justin-Liu發表於2018-01-29
FrameworkWebJavaScript

部落格地址：http://blog.csdn.net/FoxDave

JavaScript庫格式

不同的JavaScript庫的編譯和打包方式各不相同。一些是以模組的方式打包的，而另一些是以純指令碼執行在全域性的方式。當從URL載入JavaScript庫時，你要如何註冊外部指令碼取決於指令碼的格式。指令碼的格式有許多中：AMD、UMD或CommonJS，但只需要知道該指令碼是不是一個模組即可。

在註冊打包為模組的指令碼時，唯一需要做的事情是指定特定指令碼需要從哪個URL載入。另一方面，非模組化指令碼需要最小範圍指令碼的URL（即.min.js）和全域性名稱變數。舉個例子，Angular v1.x是一個非模組化指令碼，我們在SPFx專案中將它註冊為外部資源，用如下程式碼指定它的URL和全域性名稱：

"angular": {
  "path": "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js",
  "globalName": "angular"
}
指定globalName屬性的值很重要，它與指令碼使用的名稱一致。這樣使指令碼能夠正確地將自己暴露給其他依賴它的東西。

ngOfficeUIFabric - 一個依賴Angular的UMD模組。由於已經在模組內進行了依賴處理，在註冊它時你只需要指定URL：

"ng-office-ui-fabric": "https://cdnjs.cloudflare.com/ajax/libs/ngOfficeUiFabric/0.12.3/ngOfficeUiFabric.js"
jQuery時一個AMD指令碼，註冊它比較簡單，即
"jquery": "https://code.jquery.com/jquery-2.2.4.js"
現在想象一下，你想要使用jQuery中的一個外掛，它時一個非模組化指令碼，這時如果使用以下程式碼進行註冊：
"jquery": "https://code.jquery.com/jquery-2.2.4.js",
"simpleWeather": {
  "path": "https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js",
  "globalName": "jQuery"
}
載入web部件很可能會發生錯誤，因為有可能兩個指令碼是並行載入的，外掛無法進行註冊。

之前提到過，SPFx允許你指定非模組化外掛的依賴關係。這些依賴在globalDependencies屬性中設定：

"jquery": "https://code.jquery.com/jquery-2.2.4.js",
"simpleWeather": {
  "path": "https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js",
  "globalName": "jQuery",
  "globalDependencies": [ "jquery" ]
}
每一個依賴必須指向config/config.json檔案中的externals部分。
現在如果你想要編譯專案，你會遇到另一個錯誤，提示你不能依賴非模組化指令碼。


要解決這個問題，你需要註冊jQuery為非模組化指令碼：

"jquery": {
  "path": "https://code.jquery.com/jquery-2.1.1.min.js",
  "globalName": "jQuery"
},
"simpleWeather": {
  "path": "https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js",
  "globalName": "jQuery",
  "globalDependencies": [ "jquery" ]
}
這樣simpleWeather指令碼就會在jQuery載入之後在自行註冊了。
很難手工判斷想要載入的指令碼是模組化還是非模組化指令碼，特別是最小化的指令碼。如果你的指令碼在一個公網URL承載，你可以使用免費的Rencore SharePoint Framework Script Check工具來確定指令碼的型別。而且，該工具讓你能夠知道承載指令碼的位置是否正確配置。

非模組化指令碼的考慮

許多JavaScript庫和指令碼是非模組化指令碼。雖然SPFx支援載入非模組化指令碼，你還是應該避免去使用它們。

非模組化指令碼在頁面的全域性被註冊：一個web部件載入的指令碼對頁面上的其他web部件都可用。如果你有兩個web部件使用了不同版本的jQuery並且都載入為非模組化指令碼，最後載入的web部件會覆蓋之前載入的jQuery版本。你能想象，這可能會導致不可預見的結果並且不容易除錯問題。模組結構通過隔離指令碼並防止它們互相影響解決了這個問題。

什麼時候考慮捆綁打包

捆綁打包已存在的JavaScript庫到你的web部件會生成尺寸較大的web部件檔案，導致頁面的低效能。儘管我們應該避免這樣使用，但一些情況下還是有優勢的。

如果你編譯一個標準的解決方案，這個解決方案會在很多內網執行，那麼整體捆綁打包會幫助你確保你的web部件會正確工作，因為你不知道你的解決方案安裝在哪裡，不知道那裡能不能從外部資源載入指令碼，那麼整體打包就會確保你引用的資源都可以成功載入到。

如果你的解決方案由許多web部件組成，有一些共享的函式，那麼可以考慮將這些共享的函式單獨編譯成庫並作為外部資源在所有web部件中引用。

總結

通過前面一篇和本篇，在編譯客戶端web部件時，SPFx允許我們捆綁打包將這些庫跟web部件打包到一起，或者作為外部資源載入。雖然從外部URL載入已存在的庫是推薦的方式，還是有一些情況採用捆綁打包更適合。

相關文章