使用NPM安裝

---

立即下載Kendo UI for jQuery

Node Package Manager (NPM)是一個流行的JavaScript包管理器。

本文假設(shè)您熟悉使用NPM中基于瀏覽器的庫的必要步驟，要解決這個問題需要用到的一些工具是Browserify、Webpack和SystemJS。

1. 安裝軟件包

Kendo UI for jQuery維護了商業(yè)的Kendo UI for jQuery (Kendo UI Professional)和開源的Kendo UI for jQuery (Kendo UI Core) NPM包。

所有正式版本、服務(wù)包和內(nèi)部構(gòu)建都被上傳到兩個發(fā)行包中。

NPM的商業(yè)分布

商業(yè)發(fā)行版NPM包可以在NPM注冊表中以@progress/kendo-ui的方式獲得。

提示：從R2 2022版本開始，@progress/kendo-ui NPM包就需要激活腳本許可證。

安裝@progress/kendo-ui的命令如下：

npm install --save @progress/kendo-ui

基于NPM的開源發(fā)行版

開源發(fā)行版NPM包可以在http://npmjs.com/上以kendo-ui-core的形式獲得，無需憑據(jù)即可訪問。

npm install --save kendo-ui-core

2. 使用合適的NPM渠道

截至2019年11月，Kendo UI for jQuery支持官方和內(nèi)部NPM包的兩個獨立通道。

您需要將商業(yè)和開源Kendo UI發(fā)行版的官方版本和服務(wù)包上傳到最新的頻道。若要安裝最新的正式版本，請運行npm install——save @progress/kendo-ui@latest。

內(nèi)部構(gòu)建在開發(fā)通道中發(fā)布。

• 若要安裝最新的內(nèi)部版本，請運行npm install——save @progress/kendo-ui@dev。
• 若要安裝較早的版本，請運行npm install——save @progress/kendo-ui@2019.3.1115-internal。

3.選擇模塊系統(tǒng)

Kendo UI for jQuery庫在以下模塊系統(tǒng)中分發(fā)商業(yè)代碼：

• (截止到v2022.3.1109) ecmascript -腳本文件位于esm文件夾中。
• (截止到v2022.3.1109) umd -腳本文件位于umd文件夾中。
• commonjs -腳本文件位于js文件夾中。

4. 捆綁腳本

從2022.3.1109版本開始，該軟件包Json文件中就有三個與綁定相關(guān)的字段：

• module：主要指向esm文件夾中的ECMAScript kendo.all.js腳本。
• main：主要指向CommonJS kendo.all.Js目錄下的Js腳本。
• browser ：主要指向UMD文件夾下的UMD kendo.all.min.js腳本。

若需要使用其中一個模塊系統(tǒng)來捆綁Kendo UI腳本，可以選擇rollup之類的插件。

ECMA腳本

要捆綁ECMAScript文件：

1.在項目的主目錄中添加一個匯總配置文件：

// rollup.config.js
import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
input: 'index.js',
output: [{
file: 'dist/bundled.js',
sourcemap: 'inline',
globals: {
jquery: '$'
}
}],
external: ['jquery'],
treeshake: false,
plugins: [
nodeResolve()
]
}

2.使用import關(guān)鍵字將KendoUI腳本包含到您的應(yīng)用程序中：

Copy code// index.js file located in the main directory of your project (same level as rollup.config.js).

import `jquery`;
import `@progress/kendo-ui`;

// A sample Kendo UI component in your project.
$("#grid").kendoGrid({...grid configs...});

3.打開終端并執(zhí)行rollup命令，因此綁定的腳本位于項目的dist/bundle .js文件夾中：

npx rollup -c

常見的JS

要捆綁CommonJS文件：

1.在項目的主目錄中添加一個匯總配置文件：

// rollup.config.js
import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
input: 'index.js',
output: [{
file: 'dist/bundled.js',
sourcemap: 'inline',
globals: {
jquery: '$'
}
}],
external: ['jquery'],
treeshake: false,
plugins: [
commonjs(), // Add the commonjs plugin.
nodeResolve()
]
}

2.使用require關(guān)鍵字將Kendo UI腳本包含在應(yīng)用程序中：

// index.js file located in the main directory of your project (same level as rollup.config.js).

require(`jquery`);
require(`@progress/kendo-ui`);

// A sample Kendo UI component in your project.
$("#grid").kendoGrid({...grid configs...});

3.打開終端并執(zhí)行rollup命令，因此綁定的腳本位于項目的dist/bundle .js文件夾中：

npx rollup -c

UMD

捆綁UMD文件：

1.在項目的主目錄中添加一個匯總配置文件：

// rollup.config.js
import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
input: 'index.js',
output: [{
file: 'dist/bundled.js',
sourcemap: 'inline',
globals: {
jquery: '$'
}
}],
external: ['jquery'],
treeshake: false,
plugins: [
nodeResolve({
browser: true // Let rollup know that it has to use the browser field from the package.json file when creating the bundle. The browser field points to the UMD modules by default.
})
]
}

2.使用import關(guān)鍵字將Kendo UI腳本包含到您的應(yīng)用程序中：

// index.js file located in the main directory of your project (same level as rollup.config.js).

import `jquery`;
import `@progress/kendo-ui`;

// A sample Kendo UI component in your project.
$("#grid").kendoGrid({...grid configs...});

3.打開終端并執(zhí)行rollup命令，因此綁定的腳本將位于項目的dist/bundle .js文件夾中：

npx rollup -c

已知的問題

Progress NPM注冊表被npmjs.com取代。要開始使用默認(rèn)注冊表，請從.npmrc文件中刪除包含registry.npm.telerik.com的兩行。

NPM包中的腳本不能在瀏覽器中使用，要解決這個問題，可以使用像WebPack這樣的打包器。

2017年5月之后，可以通過git+https://bower.telerik.com/npm-kendo-ui/npm-kendo.git訪問的GitHub存儲庫中的kendo leglegacy包將不再更新，但仍將保持活躍。