4

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?)

farlee2121
  • 2,959
  • 4
  • 29
  • 41
Maxim Soltyk
  • 73
  • 1
  • 1
  • 8
  • `many js modules what have a more function` Huh? – CertainPerformance Apr 14 '18 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 Apr 14 '18 at 20:33
  • You want to group the imported functions into an object? – ibrahim mahrir Apr 14 '18 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 Apr 14 '18 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 Apr 14 '18 at 21:39
  • I want to concatenate some count of a namespace in one namespace and connect him to HTML file, using that webpack chunk. – Maxim Soltyk Apr 14 '18 at 21:47

2 Answers2

2

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 recommend that you have a dedicated module for binding events to your page. This will prevent UI manipulation from leaking into your logic.

farlee2121
  • 2,959
  • 4
  • 29
  • 41
2

You can try

import "module/myModules";

it should add your file to bundle.

aspirisen
  • 965
  • 13
  • 29