dimitarvp

How to load old-fashioned JS (no imports) into my webpack bundle?

Hey guys,

How do I include a plain old JS file without any exports or modern shebangs inside my resulting app.js? The file is just a collection of JS functions.

Just started a Phoenix 1.5.1 project, tried putting the file in assets/static/ seeing as Webpack has a rule for it (but I might misunderstand it) and then tried calling one of the functions from the dev console, but they are not found (and searching inside the generated app.js doesn’t show them either). Also tried putting the vile in vendor/js/ and still no go.

What’s a quick and efficient way to do this?

Disclaimer: I really am not looking to become a webpack expert. The project will not mandate it, I am just stumbling at the first few basic steps (or I thought they were basic).

13 comments

/phoenix #javascript #webpack

0 10903 13

2021-05-02 20:13:01 UTC

Marked As Solved

lucaong

Good that you managed to solve it JavaScript bundlers, transpilers, tooling, etc. are indeed really complicated and add quite a bit of cognitive overhead.

Just to add to what I said before, note that defining variables with let or const will not define them as globals on the window object (as opposed to var when used at the top level). In general, if you want a global that you can use from the console, defining it explicitly as window.myGlobal = ... is usually the best way.

Post #10

Also Liked

lud

If you bundle with webpack you can install the script-loader module as a dev dependency and import like that : import 'script-loader!./my-filejs'

Post #12

lucaong

It depends. Discarding module bundlers, imports, etc. and going back to “vanilla” JS, if you want to call a function globally it must be defined on the global object (window in the browser).

Globals can be defined in several ways:

function myGlobalFunction () { /* ... */ }

var myGlobalFunction = function () { /* ... */ }

window.myGlobalFunction = function () { /* ... */ }

// Not recommended, but omitting `var` also defines a global, although is not allowed in strict mode:
myGlobalFunction = function () { /* ... */ }

The first two ways above have local scope, so if they appear inside another function they won’t define a global.

Alternatively, it’s possible that your file defines a global object inside which the functions are defined:

window.someGlobal = {
  someFunction: function () { /* ... */ }
}

In this case, you would have to call it as someGlobal.someFunction().

Maybe, even without disclosing the code, could you show the general pattern used by your file to define the functions that you want to call?

Post #8

LostKobrakai

This is what’s supposed to happen. Binding variables into the global scope by default is considered bad practice because it often lead to things overriding each other. This is why modern bundlers properly scope code to stop it from tripping over other code. If you want things to still be bound to the global window object do it explicitly using e.g. window.myFunc = myFunc.

Post #11

Last Post!

crockwave

In the current Phoenix deployment environment, after examining webpackconfig.js in the assets folder, I learned to drop the third party js files directly into the assets/vendor folder, in order to be compiled into the app.js file by webpack

    entry: {
      'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js'])
    },
    output: {
      filename: '[name].js',
      path: path.resolve(__dirname, '../priv/static/js'),
      publicPath: '/js/'
    },

Post #14