How to import library like a module ?

[deliriousraw]

Do you know, how to import library for webpack ? I want to use it in SPA (vue js) But module-bundler told me that relative modules not founded

[rohithb]

xlsx_html.full.min.js file contains lib/xlsx.core.min.js from protobi/js-xlsx - A fork of SheetJS/js-xlsx which support styles. This library does all the works in creating the excel file. lib/FileSaver.min.js from eligrey/FileSaver.js - Used to save the created excel file. src/xlsx_html_utils.js - Utility functions for js-xlsx to create excel sheets from html tables.

So instead of using using xlsx_html.full.min.js directly try importing these libraries separately. you can find xlsx_html.full.min.js in the dist folder.

[gavinhungry]

@deliriousraw,

I encountered the same issue as you while trying to import this module with webpack. For the life of me, I couldn't get the separate imports (described above by @rohithb) working. My workaround is far from ideal, and if you come up with something better, do let me know.

I created a wrapper module that "imports" this module:

let script = document.createElement('script');
script.setAttribute('type', 'application/javascript');
script.innerText = require('fs').readFileSync('./node_modules/tabletoexcel/dist/xlsx_html.full.min.js', 'utf8');
document.head.appendChild(script);

// export something here - could be as simple as a function returning window.XLSX

The readFileSync call will be taken care of by the brfs transform (below), replacing the call with a string representing the contents of the file (this module) which is then evaluated only in the browser context at runtime. There are a couple of downsides to this, though:

1) The script is just a string, so any script minification steps won't work (luckily, this module is already well minified). 2) The module gets attached globally to window. You can still export it (along with other functionality if needed) from your wrapper module, however.

Install brfs and transform-loader, and add to webpack.config.js:

module: {
  rules: [
    {
      test: /\/table-to-excel-wrapper\.js$/,
      loader: 'transform-loader?brfs'
    }
  ]
}

You could also build it with Browserify:

$ browserify table-to-excel-wrapper.js -t brfs --standalone TableToExcelWrapper

This will attach your wrapper module to window.TableToExcelWrapper.

Hope this helps.

[deliriousraw]

@gavinhungry , I decided problem the similar way. I put file an external store (free hosting), then I import library exact as your wrapper module before page will be rendered. I'll check your advice too. Thank's a lot

[ovaqlab]

@deliriousraw if you are creating Vue CLI/Vue application you can add this xlsx_html.full.min.js file in index.html file. thereby you can use the functions of table-to-excel. No need to import other dependancy files. As @rohithb mentioned you can also import all the dependent libraries separately.