javascript - 了解 Brunch 配置中的不同导出方式

Question

所以我得到了这个配置文件:

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']
  }
}

当上面的代码被触发时，5 个文件被构建并编译成 3 个，正如预期的那样。

然后为了更好地理解，我将配置文件中的first export更改为:

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']
  }
}

现在 Bootstrap 代码没有被编译到最终的样式表中。为什么我会遇到这种行为？

Answer 1

这个问题与 Brunch 没有直接关系，但与节点如何处理导出有关。查看来自 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