Javascript ES6 import without a name [duplicate]

Question

I am running Webpack, Babel and Vue.js and I want to split up my entry file. Currently I have an app.js file which is the starting point to my application.

I have some bits and pieces of Code I want to put into a bootstrap.js file which I want to include in my main app.js file can I can have a clean file to start out with Vue and add components in it as I go.

Some examples of what I would want to put in my bootstrap.js file:

import messagesNL from './translations/nl';

Vue.use(VeeValidate, {
  locale: 'nl',
  dictionary: {
    nl: {
      messages: messagesNL
    }
  }
});

window.Vue = Vue;

So pretty much setup for plugins, global configuration, etc. I feel like this is not your typical module and I find it hard to create a module like structure for this file so I basically use this in my app.js file:

import bootstrap from './bootstrap';

Having no idea if this would work, it seems to just import everything neatly without me having done a module exports {} like syntax.

Now the bootstrap variable that I assigned to that file is unused in app.js since it's only used to require the file and my IDE kind of 'greys` it out to let me know it is unused.

Is there another syntax for this so that I don't have to assign a name to it? Is this approach ok to split up my file, or should I be doing something else?

I haven't put it into a proper module yet because then it would have it's own local scope and I would be unsure how to set up Vue with all the plugins, etc. If anybody has a better suggestion I am open to it.

Cheers.

Answer 1

To include a file without importing anything you can just drop the <name> from part of the statement:

import './bootstrap';

This will execute the target module without affecting the scope of the active module, but it may have side-effects such as declaring globals or modifying existing globals.

---

As stated in the MDN docs for Import a module for its side effects only:

Import an entire module for side effects only, without importing anything. This runs the module's global code, but doesn't actually import any values.

import '/modules/my-module.js';