DevExtreme jQuery/JS - Link Modules
DevExtreme comes in pre-assembled bundles. dx.viz.js includes Charts, Gauges, Funnel, VectorMap, and other data visualization widgets. dx.web.js includes Grids, Scheduler, Form, and various editors. dx.viz-web.js and dx.all.js compile the previous two bundles. Bundles that include a particular widget are listed on the widget's overview page in the API reference.
Alternatively, you can use DevExtreme modules to import only the functionality you require. Unlike the bundles, modules are compact and can be loaded on demand. This optimizes memory consumption and speeds up your application.
You can create a smaller bundle from modules using Webpack or load modules using jspm or RequireJS.
Use Webpack
First, ensure the Webpack is installed globally. If not, execute the following command.
- npm install webpack -g
Install the DevExtreme package to the directory where you wish to store the files.
- npm install devextreme
To link up the modules to your application using Webpack, begin by defining the configuration object.
- var path = require('path');
- module.exports = {
- entry: './index.js',
- output: {
- filename: 'bundle.js'
- }
- };
Link the bundle script file to your HTML page.
- <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
Add themes to your application.
- <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.common.css" />
- <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.light.css" />
Create an entry script of your application. For example, it can specify required modules.
- var $ = require('jquery');
- var dialog = require('devextreme/ui/button');
- ...
Then, create the bundle.
- webpack
The example below demonstrates how to create an application with a single button using modules, and how to configure Webpack to pick up and bundle all the required scripts to your application.
You can download the example from GitHub. To use it, follow the instructions on GitHub.
webpack.config.js
- var path = require('path');
- module.exports = {
- entry: './index.js',
- output: {
- filename: 'bundle.js'
- }
- };
index.js
- var $ = require('jquery');
- var dialog = require('devextreme/ui/dialog');
- require('devextreme/ui/button');
- $("#myButton").dxButton({
- text: "Say 'Hello world'",
- onClick: function() {
- dialog.alert('Hello world!', '', false);
- }
- });
index.html
- <!DOCTYPE html>
- <html>
- <head>
- <title>DevExtreme with Webpack and Knockout example</title>
- <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.common.css" />
- <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.light.css" />
- </head>
- <body>
- <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
- <div id="myButton"></div>
- </div>
- <!-- Include the bundle script -->
- <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
- </body>
- </html>
Use jspm
First, install jspm in your application folder. For detailed information on installing, see the jspm documentation.
- npm install jspm
- jspm install npm:devextreme
To link up the modules to your application using jspm, first add links to the library and then the configuration file to your application.
- <script src="jspm_packages/system.js"></script>
- <script src="config.js"></script>
Create an entry script of your application. For example, it can specify the required modules.
- import $ from 'jquery';
- import 'devextreme/ui/button';
- ...
Then, in the HTML page, import your application's main entry point.
- <script>
- System.import('./index.js');
- </script>
The example below demonstrates how to create an application with a single button using the modules from a local directory.
You can download the example from GitHub. To use it, follow the instructions on GitHub.
index.js
- import 'devextreme/dist/css/dx.common.css!';
- import 'devextreme/dist/css/dx.light.css!';
- import $ from 'jquery';
- import 'devextreme/ui/button';
- import dialog from 'devextreme/ui/dialog';
- $("#myButton").dxButton({
- text: "Say 'Hello world'",
- onClick: function() {
- dialog.alert('Hello world!', '', false);
- }
- });
index.html
- <!DOCTYPE html>
- <html>
- <head>
- <title>DevExtreme with Jspm and jQuery example</title>
- <!--Include SystemJS loader and the config file-->
- <script src="jspm_packages/system.js"></script>
- <script src="config.js"></script>
- </head>
- <body>
- <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
- <div id="myButton"></div>
- </div>
- <!--Import of the application main entry point-->
- <script>
- System.import('./index.js');
- </script>
- </body>
- </html>
Use RequireJS
First, install RequireJS to your application folder.
- npm install requirejs
Then, install the DevExtreme package.
- npm install devextreme
DevExtreme modules are defined using the CommonJS format. RequireJS does not support this format. Thus, convert DevExtreme modules to the AMD format before using them with RequireJS. Use the RequireJS conversion tool to convert modules. Follow these steps to convert the modules.
Add the devextreme package to the 'node_modules/devextreme' directory
- npm i devextreme
Add global 'r_js' command
- npm i r.js -g
Convert the devextreme package and save it to the 'devextreme_amd' directory
- r_js -convert node_modules/devextreme devextreme_amd
To link up the modules to your application using RequireJS, begin by adding themes to your application.
- <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.common.css" />
- <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.light.css" />
Then, link RequireJS and define the configuration object.
- <script src="node_modules/requirejs/require.js"></script>
The example below demonstrates how to create an application with a single button using the modules from a local directory.
You can download the example from GitHub. To use it, follow the instructions on GitHub.
- <!DOCTYPE html>
- <html>
- <head>
- <title>DevExtreme with RequireJS and jQuery example</title>
- <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.common.css" />
- <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.light.css" />
- <!-- Include RequireJS -->
- <script src="node_modules/requirejs/require.js"></script>
- </head>
- <body>
- <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
- <div id="myButton"></div>
- </div>
- <script>
- require.config({
- paths: {
- "jquery": "node_modules/jquery/dist/jquery",
- // The path where the devExtreme modules are located.
- "devextreme": "node_modules/devextreme"
- }
- });
- // Loads the required scripts.
- require(["jquery", "devextreme/ui/dialog", "devextreme/ui/button"], function($, dialog) {
- $("#myButton").dxButton({
- text: "Say 'Hello world'",
- onClick: function() {
- dialog.alert('Hello world!', '', false);
- }
- });
- });
- </script>
- </body>
- </html>
If you have technical questions, please create a support ticket in the DevExpress Support Center.