16

I'm building an app with the AirConsole JS service. AirConsole only provides their library as a .js file you would include in your page with the usual:

<script type="text/javascript" src="https://www.airconsole.com/api/airconsole-1.6.0.js"></script>

However, I'm using Webpack and would like to import the script into my other JS files. I have tried a few methods with no luck:

  1. Create an entry file named vendor which imports the airconsole.js file. This creates a vendor.bundle.js file which I can include on my page
  2. Add the AirConsole path to my index entry point so the script is included in the bundle.js file. With this method I can verify the AirConsole code is included in the bundle.js file but attempting to create a new instance of AirConsole results in AirConsole is undefined

Am I on the right track with these methods? If not, what is the recommended way to import a non-module .js file?

Brett DeWoody
  • 59,771
  • 29
  • 135
  • 184

1 Answers1

8

The best way is by an action which we call "shimming". You can check out our new docs page for information. There are a few different ways to do on it (that depend on the needs) for your non-module.

https://webpack.js.org/guides/shimming/

Sean Larkin
  • 6,290
  • 1
  • 28
  • 43
  • Seems like I need the `script-loader` if I'm using [this file](https://www.airconsole.com/api/airconsole-1.6.0.js). When I try to create a new instance using `const airconsole = new AirConsole()` it throws a `undefined` error. – Brett DeWoody Feb 04 '17 at 00:00
  • Also, does the `script-loader` work in the `webpack.config` or is it only intended for `require` statements. – Brett DeWoody Feb 04 '17 at 11:47
  • Every loader you can use in your config (which is recommended) you can use the 'include' property to target a specific abs path of a file for the loader in config. – Sean Larkin Feb 04 '17 at 15:43