How to include webix with ES6 import?

Webix JS
#1

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

#2

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

I have tried this:

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:

but there must be a better way

#3

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' ]
      }
    ]
  }
}