Search code examples
javascriptgruntjsrequirejsamdmaterial-ui

Using material-ui in client-side requireJS environment?

I've been researching for a couple hours now on how to include material-ui as a client-side AMD module for my application, and here is the closest I've come. Using grunt-amd-wrap, I used the following grunt task in my Gruntfile:

amdwrap: {
  materialui: {
    expand: true,
    cwd: 'node_modules/material-ui/lib/',
    src: ['**/*.js'],
    dest: 'client/js/components/',
  },
},

and scheduled it to run after material-ui finished transpiling to its lib folder. However, this still poses an issue since the files require() the following modules:

"inline-style-prefixer": "^0.5.1",
"lodash.throttle": "~3.0.4",
"lodash.debounce": "~3.1.1",
"react-addons-transition-group": "^0.14.0",
"react-addons-update": "^0.14.0",
"react-addons-create-fragment": "^0.14.0",
"react-addons-pure-render-mixin": "^0.14.0",
"warning": "^2.1.0"

And I can't figure out how to bundle those to a client-side AMD module in addition to material-ui itself.

In summary: Is there a way to use grunt to convert material-ui's CommonJS syntax to a self-contained AMD module (or set of self-contained AMD modules)? I'd like to avoid using gulp, and I'd prefer to only use browserify if it is absolutely necessary.

Solution

  • I ended up using grunt-webpack. Although it's not an AMD module, I was able to bundle the files I needed along with their dependencies in one output file.