Alternative to importing global es6 constant

Question

I'm developing a WordPress theme using Sage 9 and am trying to split my files up for cleaner code for cleaner code. I'm using webpack to bundle JavaScript locally.

There is a router set up to only run JavaScript on certain pages. However when I try to import the file contents as a constant, it is globally scoped and causes issues on the homepage. The following example should better explain:

// formPage.js (the init function is only run on the form page)
import { validateAge } from '../modules/validateAge';
export default {
  init() {
    // Javascript to be fired on the form page
    new validateAge();
  },
};

// ../modules/validateAge.js
export const validateAge = Marionette.Object.extend({
  ...
}

How can I rewrite this without having the marionette object scoped globally? This fails on the homepage since the Marionette dependency is only loaded on the form page (separately from the bundle) and not the home page.

Answer 1

好的，我通过导出为函数而不是常量来解决此问题，因此对Marionette调用进行了范围界定。