DevExtreme jQuery/JS - Link Modules

DevExtreme comes in pre-assembled bundles. dx.viz.js includes Charts, Gauges, Funnel, VectorMap, and other data visualization UI components. dx.web.js includes Grids, Scheduler, Form, and various editors. dx.all.js compile the previous two bundles. Bundles that include a particular UI component are listed on the UI component'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

  1. Install Webpack globally.

    npm install webpack -g
  2. Install the DevExtreme package in your application folder.

    npm install devextreme
  3. Define the Webpack configuration file.

    JavaScript
    var path = require('path');
    
    module.exports = {
        entry: './index.js',
        output: {
            filename: 'bundle.js'
        }
    };
  4. Link the bundle script file to your application.

    HTML
    <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
  5. Add DevExtreme themes.

    HTML
    <link rel="stylesheet" href="node_modules/devextreme/dist/css/dx.light.css">
  6. Create your application's entry script and specify modules in it.

    JavaScript
    import "devextreme/ui/button";
    ...
  7. Create the bundle.

    webpack

To see how to use Webpack with jQuery, refer to examples on GitHub. The webpack.config.js, index.js, and index.html files contain the main code. Note that jQuery components require additional integration module.

View on GitHub

Use jspm

  1. Install jspm in your application folder.

    npm install jspm
  2. Install the DevExtreme package via jspm.

    jspm install npm:devextreme
  3. Link the system.js and configuration files to your HTML page.

    HTML
    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
  4. Create your application's entry script and specify modules in it.

    JavaScript
    import "devextreme/ui/button";
    ...
  5. Import your application's main entry point on the HTML page.

    HTML
    <script>
        System.import('./index.js');
    </script>

See examples on how to use jspm with jQuery on GitHub. The index.js and index.html files contain the main code. Note that jQuery components require additional integration module.

View on GitHub

Use RequireJS

  1. Install RequireJS and DevExtreme in your application folder.

    npm install requirejs devextreme
  2. Use the RequireJS conversion tool to convert the DevExtreme modules from CommonJS to AMD and save them in the devextreme_amd directory:

    npx r_js -convert node_modules/devextreme/cjs devextreme_amd
  3. Add DevExtreme themes to your application.

    HTML
    <link rel="stylesheet" href="node_modules/devextreme/dist/css/dx.light.css">
  4. Link RequireJS and define its configuration object.

    HTML
    <script src="node_modules/requirejs/require.js"></script>
    <script>
        require.config({ 
            // ... 
            paths: {
                // ...
                "devextreme": "devextreme_amd"
            }
        });
    </script>

You can see examples on how to use RequireJS with jQuery on GitHub. The index.html file contains the main code. jQuery components require additional integration module.

NOTE
We recommend to use Webpack or jspm for better performance.

View on GitHub