How to include webix with ES6 import?

I have tried this:

but does not work. It seems that webix.js has instruction like these:
import "./views/baseview";
import "./views/baselayout";
which seem to miss a '.js' at the end

What I want to do is to include all the source files separately and not in a single bundle.

Thanks

Comments

  • The previous post has some HTML that was stripped out. It should have been:

    I have tried this:
    <script src="webix/sources/webix.js" type="module">
    but it didn't work.

    In fact I modified from the webix sources all the import and exports adding the suffix '.js' and it actually works.

    The main html file looks like this:

    <script>
    window.DEBUG = true;
    </script>
    <script type="module">
    import * as webix from "./webix/sources/webix.js";
    webix.ui({
    // ...
    });
    </script>

    but there must be a better way

  • Hello @fermo111,

    Actually, importing the module directly from the sources is not a supported use case. The import and export statements you see in the webix.js file located in the /sources folder are used during build assembly (e.g. you can remove some views from the final build, thus reducing the overall size of the library), and are not intended to be used separately.

    While you can technically use Webix as a module, we recommend that you include Webix directly in the page through a script tag. The library will work faster due to caching, and your dev toolchain will work faster as well. Could you please clarify as to why you would want to use Webix as a module? Also, are you using Webpack by any chance? If you are, there are a few other potential options for including the library as a module:

    1. Using the built-in ProvidePlugin:
    plugins: [
      new webpack.ProvidePlugin({
        // SET PATH TO WEBIX HERE webix: path.join(__dirname, "node_modules", "@xbs", "webix-pro")
      }),
      ...
    ]
    
    1. Using script-loader:
    module.exports = {
      module: {
        rules: [
          { 
            test: /\@xbs\/webix-pro\/webix\.js$/, //path to the library
            use: [ 'script-loader' ]
          }
        ]
      }
    }
    
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!