Module Bundlers

Almost all of today's JavaScript frameworks work with some sort of module bundler to combine the files in your project into a single file that can be loaded by the browser. The most popular of these is Webpack which is the default choice on major projects like Angular, React, and Vue.js although alternatives do exist. Some can be extended to do more tasks but at a minimum they are usually responsible for loading your license and exposing it to the rest of your files so it can be used. Module bundlers make heavy use of the newer import and export syntax; many simple mistakes coming from working with bundlers stem from something not being imported or exported correctly. If you are not very familiar with the new syntaxes and the different browsers that implement them, be sure to read about them before jumping into working with a module bundler.

Getting started with Webpack

The quickest way to get started with Webpack is to use the Webpack Provide Plugin to have Webpack automatically provide the chartiq library files directly to the rest of your project:

// Inside your webpack.config.js file
    ...
    plugins: [
        new webpack.ProvidePlugin({
            CIQ: 'chartiq',
            $$$: 'chartiq',
            // Webpack will also let provide a named export
            quoteFeedSimulator: [path.join('path', 'to', 'quoteFeedSimulator'),'quoteFeedSimulator']
        })
    ],
    ...

Resolving Library Files

Using the Provide Plugin is a fast way to give the rest of your files access to the CIQ namespace but the above example will only work if Webpack knows where to look for the files provided in your license. Webpack allows you to specifiy where to resolve folders in addition to the node modules and allows you to alias files for convenience:

/// Inside your webpack.config.js file
...
    resolve: {
        alias: {
            // Alternative pathways to filenames just in case you want to use them
            chartiq: path.resolve(__dirname, 'path', 'to', 'chartiq.js'),
            './chartiq': path.resolve(__dirname, 'path', 'to', 'chartiq.js'),
            '../js/chartiq': path.resolve(__dirname, 'path', 'to', 'chartiq.js')
            // Or alias some file as something else
            awesomeQuoteFeed: path.resolve(__dirname, 'path', 'to', 'quoteFeedSimulator.js')
        },
        modules: [
            'node_modules',
            // Path to the extracted 'js' folder from your ChartIQ license where chartiq.js lives
            path.join(__dirname, 'path', 'to', 'js'),
            // Path to the extracted 'examples/feeds' folder from your ChartIQ license where quoteFeedSimulator.js lives
            path.join(__dirname, 'path', 'to', 'examples', 'feeds')
        ]
    }
...

jQeury

ComponentUI and the web components have a dependency on jQuery to work correctly. Since many projects use jQuery as a dependency already and it is typically loaded on the global, the library does not specify a version of jQuery for use explicity. Instead the library relies on a global jQuery value, which may throw errors if your module does not include this global. Webpack has specific examples of how to include jQuery as a global that is independent of your bundle that is the recommended approach. See their externals configuration documentation or their example in externalizing lodash in authoring libraries.

Examples

If you would like to see some examples of how to include the ChartIQ library with Webpack we recommend that you look at our sample projects as a starting point for how to customize your own Webpack config.


Next Steps: