How to build without a single main

StealJS
1

Hi

How can I create a production build from several modules without having a single main?

My site is old-school with a bunch of separate pages (php), each having a javascript file. There is no single “myapp.js” for the entire site (as this is not a single page app).

I cannot figure out how to build those into a single js-file.

I tried setting main as an array, but that fails.

// package.json
"scripts": {
    "build": "steal-tools build --bundle-steal -c ./website/static/js/config.js",
  },

// config.js
steal.config({
    baseURL: "website/static/js/",
    main: ['product', 'category', 'shop']   // Yeah right!
});

Running a build:

> steal-tools build --bundle-steal -c ./website/static/js/config.js

OPENING: .../website/static/js/config.js
ERROR: name.match is not a function
ERROR: 
Build failed

I suppose I could create a “main.js” with lines like this (below) and then point the config.js to this file. But it seems awkward (also, I wouldn’t really use the main.js in my site):

import x from "product";
import y from "category";
import z from "cart";

I’m really at a loss here. Thanks for any input!

2

Hi @Wickman, you want to use the bundle config: https://stealjs.com/docs/config.bundle.html.

3

Ok, thanks but a bit more elaboration would help :slight_smile:

I tried this:

// config.js
steal.config({
    baseURL: "/website/static/js/",
    main: 'myapp',
    bundle: ['product', 'category', 'cart'] // <==========
});

Now when I run steal build, I get a bunch of js-files in the dist/bundles dir. I was expecting a single file here?

When I run steal bundle, I get a dev-bundle.js file. Is this what I’m looking for? Tried to load it, but steal tries to find it in steal-master/dev-bundle.js which fails:

<script src="/website/static/steal-master/steal.js"
        dev-bundle="dev-bundle"></script>
4

Oh, I misunderstood what you want to do I think. I thought you wanted to bundle the JS for each page separately. That way each page would only need to load the JS it needs. That is what the dist/bundles has with the config you used.

The dev-bundle is a bit different and is intended to be used during development, not for your production site. You can read about it here: https://stealjs.com/docs/StealJS.guides.development_bundles.html.

If you want to create a single JS file with all of your pages combined, you’ll probably have to manually create a main.js file that imports each of them like you proposed originally. However, I really think the way to go is to bundle each of your pages separately and just load the 1 script you need on each page.

1 Like
5

Hey @Wickman, you can use the multi-main build:

stealTools.build({
  config: __dirname + "/config.js",
  main: ["product", "category", "cart"]
});

You probably do not want to use the bundleSteal option though, because it will be put into each of the main bundles. Instead use steal.production.js and have a different script tag for each page:

<script src="path/to/steal.js" main="product"></script>
1 Like
6

Thanks a lot, that’s what I’m looking for!

I tried using main as an array in config.js, but it didn’t work. Apparently, it works with build. It’s a bit confusing.

You guys are probably correct in that having one bundle for each page is better (or at least easier to build) than one for the entire site.

7

@Wickman Actually I think the multi-main is a pretty powerful feature of steal, just not one we use a whole lot. I think the recommendation comes more from a lack of experience using multi-main rather than it being “bad”. Definitely you should give it a try! :slight_smile:

8

Yeah, it seems to be working!

Right now I’m trying to figure out how to avoid bundling jquery in each page-bundle. This ought to be the last hurdle for me. Fingers crossed…