使用NPM安装

---

立即下载Kendo UI for jQuery

是一个流行的JavaScript包管理器。

本文假设您熟悉使用NPM中基于浏览器的库的必要步骤，要解决这个问题需要用到的一些工具是Browserify、Webpack和SystemJS。

1. 安装软件包

Kendo UI for jQuery维护了商业的Kendo UI for jQuery (Kendo UI Professional)和开源的Kendo UI for jQuery (Kendo UI Core) NPM包。

所有正式版本、服务包和内部构建都被上传到两个发行包中。

NPM的商业分布

商业发行版NPM包可以在NPM注册表中以的方式获得。

提示：从R2 2022版本开始，@progress/kendo-ui NPM包就需要。

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

npm install --save @progress/kendo-ui

基于NPM的开源发行版

开源发行版NPM包可以在上以的形式获得，无需凭据即可访问。

npm install --save kendo-ui-core

2. 使用合适的NPM渠道

截至2019年11月，Kendo UI for jQuery支持官方和内部NPM包的两个独立通道。

您需要将商业和开源Kendo UI发行版的官方版本和服务包上传到最新的频道。若要安装最新的正式版本，请运行npm install——save @progress/kendo-ui@latest。

内部构建在开发通道中发布。

• 若要安装最新的内部版本，请运行npm install——save @progress/kendo-ui@dev。
• 若要安装较早的版本，请运行npm install——save @progress/kendo-ui@2019.3.1115-internal。

3.选择模块系统

Kendo UI for jQuery库在以下模块系统中分发商业代码：

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

4. 捆绑脚本

从2022.3.1109版本开始，该软件包Json文件中就有三个：

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

若需要使用其中一个模块系统来捆绑Kendo UI脚本，可以选择之类的插件。

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关键字将KendoUI脚本包含到您的应用程序中：

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.打开终端并执行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关键字将Kendo UI脚本包含在应用程序中：

// 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.打开终端并执行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关键字将Kendo UI脚本包含到您的应用程序中：

// 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.打开终端并执行rollup命令，因此绑定的脚本将位于项目的dist/bundle .js文件夹中：

npx rollup -c

已知的问题

Progress NPM注册表被取代。要开始使用默认注册表，请从.npmrc文件中删除包含registry.npm.telerik.com的两行。

NPM包中的脚本不能在浏览器中使用，要解决这个问题，可以使用像这样的打包器。

2017年5月之后，可以通过git+//bower.telerik.com/npm-kendo-ui/npm-kendo.git访问的GitHub存储库中的kendo leglegacy包将不再更新，但仍将保持活跃。