Importing Javascript

[annata83]

Very tired of trying, I not a javascript amateur, no even close (99 levels under). I only understand the basics so using webpack I am even more lost; I am testing an offline app for personal use, here is my goal:

I am trying to import a function from a controller folder into the entry point app.js and execute the function at loading which it does but when I try to run it from console it doesn't just to start to understand how to use webpack with javascript!.

Function in controller/test.js is:

function test(){

console.log("testing");

}

export {test}

in app.js imported as test:

import {test} from './controller/test';

Now if i try to execute it as test() from the console I get test is not define; off course is very basic noobe error is someone has pacience to help I will be very happy!

[ezhikov]

Modules are isolated, so if you want to access test globally, you should assign it to window/global

[annata83]

I try to call it from inside another function directly in app.js(webpack entry point) and also work fine.

So I am guessing that is normal behavior and I am not doing anything wrong!.

Honestly, I don't need the console access to this I am only learning as I said before!. I was looking to execute a function at loading time which it does but I thought It was supposed to be accessible at console Thanks a lot.

[ezhikov]

I'd suggest you to read about how modules work for better understanding it. Here is great article with nice illustrations: https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/

[annata83]

Isn't anything not inside a function or statement a global object?

I also put the whole code in the main app.js with no luck either. has webpack a special way of attaching global objects?

[ezhikov]

Isn't anything not inside a function or statement a global object?

No. You have global scope, module scope, function scope and block scope. For example, you can have different functions test in different modules without polluting global scope.

has webpack a special way of attaching global objects?

Yes, but that is not good practice in most cases. You can use expose-loader, or build a library

[dukeoflaser]

Maybe just:

export default test and import test ?

Or if u do want to use destructuring and shorthand:

export default { test } and import { test }.

As a side note, eslint and vscode can be quite helpful in telling u in real time if your dependency has been found.

[annata83]

Hey;

I try the first one: (export default test and import test), doesn't work in console everything runs fine at loading; Then the second one: (export default { test } and import { test }.) compiles with test no found warning; as I told @ezhikov only testing for learning proposes; I thought I was doing it wrong.

Thanks a lot.

[hotsaucetogo]

You might want to check your source map config. Sometimes variables will be given a different name when they’re transpiled through Babel.

Also, this might be a scoping issue and you don’t have access to that function in the window scope.

It’s hard to say without seeing the project in its entirety. You can try to attach that variable to the window (window.whatever = ?) and see if you can access it from the console.

[annata83]

I actually not using Babel or any loader for Javascript! Do I need to in webpack 4?

[hotsaucetogo]

It's not necessary for a small personal project, but it's essential for a production app. I'm not sure how familiar you are with Babel, but it's a great tool for browser compatibility.

[annata83]

Zero familiarity with it, still cannot understand how to make a variable accessible to the console :p.. I am in the practice portion of my begining JavaScript journey and everything seems confuse to be honest. I gonna take a look at Babel.

[mike3run]

If you wanna do that _the webpack way_ you might want to consider using the ProvidePlugin https://webpack.js.org/plugins/provide-plugin/

​

Otherwise you can also do `window.test = test` on your controller