Skip to content

Tools: Module configurations

Jump to bottom
bre1470 edited this page Feb 14, 2019 · 1 revision

Tools: Module configurations

Content

AMD configuration (RequireJS) ES6 configuration

AMD configuration (RequireJS)

<!-- index.html -->

<html>
    <head>
        <script src="require.js"></script>
        <script>
            require.config({
                packages: [{
                    name: 'highcharts',
                    main: 'highcharts'
                }],
                paths: {
                    'main': 'scripts/my-chart-script',
                    'highcharts': 'https://code.highcharts.com'
                }
            });
        </script>
    </head>
    <body>
        <div id="container"></div>
        <script>require(['main']);</script>
    </body>
</html>
// scripts/my-chart-script.js

require(

    [
        'highcharts'
    ],

    function (Highcharts) {
        Highcharts.chart('container', {
            series: [{
                data: [1, 2, 3]
            }]
        });
    }

);

ES6 configuration

<!-- index.html -->

<html>
    <head>
    </head>
    <body>
        <div id="container"></div>
        <script type="module">
            import main from 'scripts/my-chart-script.js';
            main();
        </script>
    </body>
</html>
// scripts/my-chart-script.js

import * as Highcharts from 'https://code.highcharts.com/es-modules/masters/highcharts.js';

export default function () {
    Highcharts.chart('container', {
        series: [{
            data: [1, 2, 3]
        }]
    });
}
Clone this wiki locally