简体   繁体   English

在客户端requireJS环境中使用material-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. 我已经研究了几个小时了解如何将material-ui作为我的应用程序的客户端AMD模块,这里是我最接近的。 Using grunt-amd-wrap , I used the following grunt task in my Gruntfile: 使用grunt-amd-wrap ,我在Gruntfile中使用了以下grunt任务:

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. 并安排它在material-ui完成转换到lib文件夹之后运行。 However, this still poses an issue since the files require() the following modules: 但是,这仍然存在问题,因为文件require()以下模块:

"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. 除了material-ui本身之外,我无法弄清楚如何将它们捆绑到客户端AMD模块。

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)? 总结:有没有办法使用gruntmaterial-ui的CommonJS语法转换为自包含的AMD模块(或一组自包含的AMD模块)? I'd like to avoid using gulp , and I'd prefer to only use browserify if it is absolutely necessary. 我想避免使用gulp ,如果绝对必要,我宁愿只使用browserify

I ended up using grunt-webpack . 我最终使用了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. 虽然它不是AMD模块,但我能够将我需要的文件及其依赖项捆绑在一个输出文件中。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM