Search code examples
javascriptmodulebrunch

Understanding different ways of export in Brunch config


So i got this config file:

exports.files = {
  javascripts: {
    joinTo: {
      'vendor.js': /^(?!app)/, // Files that are not in `app` dir.
      'app.js': /^app/
    }
  },
  stylesheets: {joinTo: 'app.css'}
};

exports.plugins = {
  babel: {presets: ['latest']}
};

exports.npm = {
  styles: {
    bootstrap: ['dist/css/bootstrap.css']
  }
}

When the above code is triggered the 5 files are built and compiled into 3, as expected.

Then for the sake of better understanding, I change the first export in my config file to this:

module.exports = {
    files: {
        javascripts: {
            joinTo: {
                'vendor.js': /^(?!app)/, 
                'app.js': /^app/
            }
        },
        stylesheets: {joinTo: 'app.css'}
    }
}

exports.plugins = {
  babel: {presets: ['latest']}
};

exports.npm = {
  styles: {
    bootstrap: ['dist/css/bootstrap.css']
  }
}

And now the bootstrap code doesn't get compiled into the final stylesheets. Why am I experiencing this behaviour?


Solution

  • This question is not directly related to Brunch but more how node handles exports. Check out this explanation taken from the node docs:

    The exports variable is available within a module's file-level scope, and is assigned the value of module.exports before the module is evaluated.

    It allows a shortcut so that module.exports.f = ... can be written more succinctly as exports.f = ... However, be aware that like any variable, if a new value is assigned to exports, it is no longer bound to module.exports:

    module.exports.hello = true; // Exported from require of module
    exports = { hello: false };  // Not exported, only available in the module