我們剛剛發布了Handsontable11.0.0.這個版本為框架包裝器增加了模塊化功能，改進了monorepo結構，增加了一個新的locale選項，等等。
React、Angular和Vue的模塊化
模塊化是一種很好的方式，可以專注於對你重要的功能，定製你的網格，並減少你的應用程式的大小。
自從Handsontable8.3.0以來，你已經能夠在Handsontable的vanillaJavaScript版本中使用模塊。現在，你也可以在Handsontable的每個框架版本（React、Angular和Vue）中使用模塊。
雖然這對我們所有的React、Angular和Vue用戶來說是個好消息，但這也是一個突破性的變化，因為你現在需要導入你想要使用的每個模塊。例如，要導入UndoRedo插件的模塊：
//import the `handsontable/base` module
importHandsontable from 'handsontable/base';
//import the `UndoRedo` module and the `registerPlugin()` function
import{
registerPlugin,
UndoRedo,
}from 'handsontable/plugins';
//register the `UndoRedo` module
registerPlugin(UndoRedo);
對模塊化不感興趣？不要害怕：我們還引入了新的方法，讓你一次性導入和註冊一個特定類別的所有模塊。
要了解更多關於Handsontable的模塊，請看我們的文檔。
要了解如何在你的框架中使用模塊，請看其中的一個指南：
在React中使用模塊
在Angular中使用模塊
在Vue中使用模塊
修訂和模塊化的TypeScript定義自從我們在Handsontable8.3.0中引入模塊化後，我們想讓每個模塊都能完全支持TypeScript。
為了實現這一目標，我們決定刪除龐大的、涵蓋所有TypeScript定義的文件（以前位於根目錄：./handsontable.d.ts）。取而代之的是，我們用一組整齊的小文件（現在位於一個新的目錄：./handsontable/types）取代它，專門用於Handsontable的各個部分。
因此，我們仔細檢查並修改了幾乎所有的Handsontable的類型定義。為什麼這很重要？有幾個原因：
從TypeScript用戶的角度來看，如果你導入整個Handsontable庫，一切都會保持不變。所有的類型定義都在導入Handsontable包時被加載。
importHandsontable from 'handsontable';
新的事情是，現在，當你導入個別模塊時，類型定義也會自動加載，例如：
importHandsontable from 'handsontable/base';
import{ registerPlugin, HiddenRows } from 'handsontable/plugins';
consthiddenRows = Handsontable.plugins.HiddenRows;
更清潔的monorepo結構在Handsontable8.3.2 中，我們將所有Handsontable版本（JavaScript、Angular、React和Vue）放在一個單一的單一存儲庫中。
現在，為了更輕鬆地管理monorepo，並為Snyk或npm-audit等第三方工具添加更好的支持，我們將Handsontable的主要JavaScript包放置在其自己的專用工作區中。我們將它從根目錄移動到一個新的子目錄：./handsontable，將它放置在與框架包裝器相同的級別：
前： 後：
如果您計劃為Handsontable的存儲庫做出貢獻，或者您在本地構建自己的Handsontable版本，則此更改可能會影響您。除此之外，它不應以任何方式影響您的應用程式。
關於構建了解Handsontable的構建過程概覽。
#MonorepoHandsontable存儲庫（打開新窗口）是一個 monorepo（打開新窗口），其中包含以下項目：
項目
位置
描述
handsontable
./handsontable
Main Handsontable project
@handsontable/angular
./wrappers/angular
Angular wrapper
@handsontable/react
./wrappers/react
React wrapper
@handsontable/vue
./wrappers/vue
Vue 2 wrapper
所有項目都在同一版本號下一起發布。但是每個項目都有自己的構建和測試流程。
#構建過程構建過程將位於./handsontable/src/目錄中的源文件轉換為以下輸出文件：
./handsontable/dist/handsontable.js
./handsontable/dist/handsontable.css
./handsontable/dist/handsontable.full.js
./handsontable/dist/handsontable.full.css
./handsontable/dist/handsontable.full.min.js
./handsontable/dist/handsontable.full.min.css
./handsontable/dist/languages/*
不要修改上面提到的輸出文件。相反，在 ./handsontable/src/目錄中進行更改，然後運行選定的構建。如果您想通過拉取請求將更改貢獻回Handsontable，這一點尤其重要。
#構建要求Handsontable構建過程需要：
#package.json 文件每個Handsontable項目都有自己的構建過程，定義在自己的package.json文件中。除此之外，根目錄也有自己的 package.json文件：
文件
保持構建任務：
./package.json
- 一次所有包
- 單獨包
./handsontable/package.json
JavaScript包
./wrappers/angular/package.json
Angular包
./wrappers/react/package.json
React包
./wrappers/vue/package.json
Vue包
#運行你的第一個構建要運行您的第一個構建：
1、安裝 Node.js （打開新窗口）（版本 15.11+）。
2、安裝 npm （打開新窗口）（版本 7.17+）。
3、克隆 Handsontable 存儲庫 （打開新窗口）。
4、從根目錄運行 npm install。
5、安裝所有必需的依賴項。
6、從根目錄運行 npm run build。
7、所有 Handsontable 軟體包都已構建。
#構建包您可以一次構建所有包，也可以單獨構建每個包。
#構建所有包要一次構建所有包：
1、確保您符合建築要求。
2、進入根目錄。
3、運行 npm run build。
該腳本構建以下包：
JavaScript包
Angular包
React包
Vue包
一個代碼示例包
#構建JavaScript包要構建JavaScript包：
1、確保您符合建築要求。
2、轉到./handsontable。
3、運行 npm run build。
僅構建 JavaScript 包。
從根目錄構建JavaScript包：
1、確保您符合建築要求。
2、進入根目錄。
3、在手動構建中運行 npm run。
僅構建 JavaScript 包。
#JavaScript構建任務在./handsontable目錄中，您還可以運行單獨的JavaScript構建任務：
JavaScript構建任務
#構建Angular包要構建Angular包：
1、確保您符合構建要求。
2、轉到./wrappers/angular。
3、運行 npm run build。
僅構建 Angular 包。
從根目錄構建Angular包：
1、確保您符合建築要求。
2、進入根目錄。
3、在角度構建中運行 npm run。
僅構建 Angular 包。
#Angular構建任務從./wrappers/angular目錄，您還可以運行單獨的Angular構建任務：
Angular構建任務
#構建React包要構建React包：
1、確保您符合建築要求。
2、轉到./wrappers/react。
3、運行 npm run build。
只有 React 包構建。
從根目錄構建React包：
1、確保您符合建築要求。
2、進入根目錄。
3、在 react build 中運行 npm run。
只有 React 包構建。
#React構建任務從./wrappers/react目錄，您還可以運行單獨的React構建任務：
React構建任務
#構建Vue包要構建Vue包：
1、確保您符合建築要求。
2、轉到./wrappers/vue。
3、運行 npm run build。
僅構建 Vue 包。
從根目錄構建Vue包：
1、確保您符合建築要求。
2、進入根目錄。
3、在 vue 構建中運行 npm run。
僅構建 Vue 包。
增強的populateFromArray()方法
當populateFromArray()方法的方法參數設置為shift_down或shift_right時，它的工作方式現在有所不同。
之前，當設置為shift_down或shift_right時，populateFromArray()為每行執行單獨的spliceRow操作，或為每列執行單獨的spliceColumn操作。
現在，當設置為shift_down或shift_right時，populateFromArray()會用一個大型操作填充行（或列）。性能上的差異確實令人印象深刻：
如果您使用由每個spliceRow和spliceColumn操作觸發的beforeChange和afterChange掛鈎，則需要適應這些變化。
新的語言環境選項為了正確處理基於本地的數據，我們給了Handsontable一個新的配置選項，叫做locale。默認情況下，它被設置為en-US。
到目前為止，我們只使用locale來確保正確過濾土耳其語的自定義搜索輸入，但我們計劃在未來擴大其使用範圍，以進一步定製功能，如過濾、搜索或比較不同的基於本地的數據集。這是改進Handsontable內置國際化功能的一個很好的起點。
你可以為整個網格設置地域選項：
consthot = new Handsontable(container, {
// set the entire grid'slocale to Turkish
locale: 'tr-TR',
});
但是您也可以為單個列設置它：
consthot = new Handsontable(container, {
columns: [
{
// set the first column's locale to Polish
locale:'pl-PL',
},
{
// set the second column'slocale to German
locale: 'de-DE',
},
{
// set the third column's locale to Japanese
locale: 'ja-JP',
},
],
});
要了解更多信息，請參閱Handsontable文檔。
更新文檔正如所承諾的，我們會不斷改進Handsontable的文檔。自上一個 Handsontable版本以來，我們對API參考的選項部分進行了徹底檢查，重寫了一些指南（例如構建），重新構建了一些其他指南（例如模塊），添加了全新的指南（例如React模塊），添加了一些新的部分現有指南（例如語言環境設置）等。
遷移指南由於我們引入了一些向後不兼容的更改，因此我們準備了一份遷移指南，引導您逐步從Handsontable10 升級到Handsontable11。
第1步：React、Angular、Vue——註冊你的模塊從Handsontable11.0.0 開始，React包裝器、Angular包裝器和Vue包裝器支持模塊化。
如果您不使用任何包裝器，則無需更改任何內容。
#使用所有模塊要繼續將所有Handsontable模塊與您的包裝器一起使用，請使用新的registerAllModules()方法註冊所有模塊。
在應用程式的入口點文件中，添加以下代碼：
//import the registerAllModules() methodimport{registerAllModules }from'handsontable/registry';
//register all Handsontable modulesregisterAllModules();
#使用單個模塊要開始在您的包裝器中使用單個Handsontable模塊，請參閱以下指南：
在 React 中使用模塊
在 Angular 中使用模塊
在 Vue 中使用模塊
#第2步：適應TypeScript定義文件的更改以前，Handsontable的所有TypeScript定義都保存在一個大文件中，放在根目錄中：./handsontable.d.ts。
現在，每個模塊都有自己的TypeScript定義文件。它們都保存在一個新的類型目錄中：./handsontable/types（打開新窗口）。
有關更多詳細信息，請參閱此拉取請求（打開新窗口）。
#第3步：適應populateFromArray()方法的更改當populateFromArray()方法的方法參數設置為shift_down或shift_right時，它的工作方式現在有所不同。
#前populateFromArray() 為每個填充的行執行單獨的 spliceRow 操作，並為每個填充的列執行單獨的 spliceColumn 操作。
beforeChange 和afterChange 鉤子被多次觸發，分別針對每個填充的行和列。
beforeChange 和 afterChange 掛鈎由每個 spliceRow 和 spliceColumn 操作觸發，源參數定義為 spliceRow 或 spliceCol。
newHandsontable(element,{
afterChange:(changes,source)=>{
if(source==='spliceRow'||source ==='spliceCol'){
handleChange(changes[0]);
}
}});
#現在populateFromArray() 用一個大的操作填充行和列。
beforeChange 和 afterChange 鉤子只被觸發一次，對於所有填充的行和列。
beforeChange 和 afterChange 鉤子由 populateFromArray() 方法直接觸發，源參數定義為 populateFromArray。
newHandsontable(element,{
afterChange:(changes,source)=>{
if(source==='populateFromArray'){
changes.forEach(change=> handleChange(change))
}
}});
發行說明：我們添加的內容為 Handsontable 的模塊化版本添加了 TypeScript 定義文件。 #7489 [突破性變化]
Vue：向 Vue 包裝器添加了對模塊化的支持。 #8820 [突破性變化]
React：為 React 包裝器添加了對模塊化的支持。 第8819章【破變】
Angular：添加了對 Angular 包裝器的模塊化支持。 #8818 [突破性變化]
添加了一個新的包入口點，允許在一個函數調用中導入內置模塊：import { registerAllEditors, registerAllRenderers, registerAllValidators, registerAllCellTypes, registerAllPlugins } from 'handsontable/registry'。 #8816
添加了新的語言環境選項，以正確處理基於語言環境的數據。 #8897
添加了 GitHub 操作工作流程，其中涵蓋了測試 Handsontable 和包裝器。 #8652
添加了新的方向助手，為未來的 RTL 支持奠定了基礎。 #8868
發行說明：我們改變了什麼發行說明：我們修復的內容修復了使用下拉菜單中的搜索輸入時基於區域設置的數據過濾不正確的問題。 第6095章
修復了使用 populateFromArray() 方法並將其方法參數設置為 shift_right 時拋出的錯誤。 第6929章
修復了 beforeOnCellMouseDown 和 afterOnCellMouseDown 掛鈎使用錯誤坐標的問題。 #8498
修復了在 Handsontable 的模塊化版本中調用 updateSettings() 方法時拋出的類型錯誤。 #8830
修復了文檔的 canonicalUrl 條目的兩個問題。 #8886
修復了當自動填充的來源是日期單元格時拋出的錯誤。 #8894
React：修復了一個 React 包裝器問題，即無法在跨多列重複使用的編輯器組件中使用不同的 props。 #8527