How to configure brunch to have multiple compiled JS files?

Phoenix Forum Questions / Help
, ,
1

I am building a simple Phoenix application that harnesses Phoenix’ channels, and I want to create two compiled JavaScript files:

  • The normal ‘app.js’ that contains all code in /assets/js/ except snippet.js.
  • A lite ‘snippet.js’ that will only be used on a couple of pages, which is a compiled (because I use ES6 stuff) version of /assets/js/snippet.js (and it imports some other dependencies using ES6 import statements).

I have been strugglig with the brunch configuration but I was unable to figure this out:

  • I attempted to alter the files: javascripts: joinTo and files: templates: joinTo sections to exclude the file on the normal case, and only include the file for snippet.js (What is ‘templates’ for exactly, anyway?)
  • I attempted to add js/snippet to modules: autoRequire but this did not help (and I don’t understand what it does exactly).

I did look in the Brunch documentation, but this did not help very much (and it is a lot less detailed than Elixir’s documentation :sweat_smile:)

Maybe someone who has done something similar in the past knows what to do?

2

here’s an example snippet from brunch config for two files which use different dependencies:

joinTo: {
        "js/app.js": /(^src\/|^node_modules\/(?!(bootstrap|trumbowyg)))/,
        "js/admin.js": /(^admin\/|^node_modules\/process\/|^node_modules\/trumbowyg\/|^node_modules\/bootstrap\/|^node_modules\/phoenix_html\/)/,
      }
...
modules: {
    autoRequire: {
      "js/app.js": ["src/index"],
      "js/admin.js": ["admin/index"],
    }
  },

edit: the src/index and admin/index map to source files assets/src/index.js and assets/admin/index.js which import needed modules

3 Likes
3

Thank you for your reply, @yurko!

Do you require to spell out the paths to all your dependencies in your Brunch file’s joinTo as well? :open_mouth:

4

These dependencies are needed as far as I remember for the separation between the compiled files. Try it without them and see if you have a need for more separation.

It’s been some time since I set these things up so I can’t give you exact explanation of what’s what and for what purpose :slight_smile:

1 Like
5

Yes, you are correct. I indeed get build errors when I try to include a file that is not part of the ‘joinTo’ statement.

Is there a way around this? Currently I need to require all my dependencies, as well as their dependencies (and their dependencies etc…) in there. Of course I can maybe set up my folder structure in a way that keeps the regexp ‘simple-ish’ but it feels very flaky to do it like this.

6

Hm, I think you only explicitly list dependencies you want to exclude, in example above this joinTo line "js/app.js": /(^src\/|^node_modules\/(?!(bootstrap|trumbowyg)))/, means “exclude bootstrap and trumbowyg from node_modules”.

Here’s the top part of the index file assets/src/index.js mapped in autoRequire "js/app.js": ["src/index"],:

import "phoenix_html"
import "babel-polyfill"
import * as backendSocket from "./authorized_socket"
import React from "react"
import ReactDOM from "react-dom"
import {Provider} from "react-redux"
import {I18nextProvider} from "react-i18next"
import ReactGA from "react-ga"

import createStore from "./redux"
import {i18n} from "./utils"
import App from "./containers/App"
import env from "./env"

as you can see these are mixed imports of own modules and ones installed via npm none of which are listed in joinTo.

Might be something with the way you include it or the way the module you want to import is defined. If it’s an npm dependency from node_modules, check if you have it enabled, something like this

npm: {
    enabled: true,
    ... 
  }
1 Like
7

It turns out that there is an alternative to joinTo which is called entryPoints, which will follow all requires (and imports and other ways of including files), which is exactly what I was looking for.

Thank you very much! :heart:

3 Likes