I have many js files where have a more function.Something like that:

// first file
function name1(){...}
function name2(){...}
function name3(){...}
function name4(){...}
...
// ...second file
function name(){...}
...

And have an entry point where I want to import that module and concatenate all namespace for webpack bundling, but I can`t use

import * as alias from "modules/myModules";

cause in my HTML I have attributes onclick, where I don`t write alias. I need something like:

import { * } from "module/myModules"

What can I do in this situation? (Do I write alias in HTML, or is there a better idea?)

I have many js files where have a more function.Something like that:

// first file
function name1(){...}
function name2(){...}
function name3(){...}
function name4(){...}
...
// ...second file
function name(){...}
...

And have an entry point where I want to import that module and concatenate all namespace for webpack bundling, but I can`t use

import * as alias from "modules/myModules";

cause in my HTML I have attributes onclick, where I don`t write alias. I need something like:

import { * } from "module/myModules"

What can I do in this situation? (Do I write alias in HTML, or is there a better idea?)

• javascript
• webpack
• ecmascript-6

• many js modules what have a more function Huh? – CertainPerformance Commented Apr 14, 2018 at 20:28
• Sry maybe I bad known terminology(English I know bad, how you can see ), I meant what I have over 10 js files with many functions I'm editing it, maybe that better explains my problems! – Maxim Soltyk Commented Apr 14, 2018 at 20:33
• You want to group the imported functions into an object? – ibrahim mahrir Commented Apr 14, 2018 at 20:38
• First of all, your method declarations are missing an export keyword. I assume you did use ES6 named exports for your modules, right? – Bergi Commented Apr 14, 2018 at 21:38
• You cannot import identifiers with a wildcard into an ES6 module. You can however use the webpack bundler options to put the exports of certain modules in the global scope. – Bergi Commented Apr 14, 2018 at 21:39

2 Answers 2

You can try

import "module/myModules";

it should add your file to bundle.

Considering this thread (es6 - import all named module without alias) and MDN's import spec page, there is no es6 syntax for importing all symbols without an alias.

Also, it is best practice to namespace your javascript. Good namespacing prevents hard-to-debug name conflicts between multiple imports.

Lastly, tag attribute-style handlers can only access global definitions. Per es6-module-uncaught-referenceerror-function-is-not-defined-at-htmlbuttonelemen, you can either add your function to the global scope or attach it through javascript like

document.querySelector("#container button").addEventListener("click", createNotification);

I would remend that you have a dedicated module for binding events to your page. This will prevent UI manipulation from leaking into your logic.