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

Phoenix Forum Questions / Help
,
1

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

2

This comment helped me add a separate entry in Webpack and load the file in the app this way but I still can’t use the functions from the dev console.

3

Would it be acceptable to put the file in assets/static and just add a script tag to your layout that imports the JS old school way?

1 Like
4

I did make a separate webpack entry and then just added this to layouts/root.html.ex:

    <script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/js/custom.js") %>"></script>

It gets loaded in the browser just fine but looking at the generated JS I am noticing the functions are wrapped by a JS closure so I suppose I have to try the old-fashioned way indeed…

5

So, removed the Webpack entry and kept the <script> tag. The file gets loaded just fine in this setup as well but still no functions accessible in the dev console. :frowning:

6

Could it be that the JS file is not creating any global function? Is it a publicly available JS?

7

Nope, it’s internal and inherited from older project.

It’s just a bunch of function definitions, no new syntax for exports. Is that the problem?

8

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?

2 Likes
9

Well, I gave up and just did:

import "../js/custom.js"

(the file resides at assets/js/custom.js).

This still doesn’t give access to the functions in the dev console but at least it works on the pages where it’s needed and they are indeed included in the final app.js. So I suppose my benchmark was all wrong.

I absolutely despise modern JS and its tooling. :091:

1 Like
10

Good that you managed to solve it :slight_smile: 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.

2 Likes
11

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.

2 Likes
12

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'

3 Likes
13

Quite interesting, I can see myself using that.

1 Like
14

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/'
    },