javascript - 如何创建 material-ui.js 文件？

Question

我已按照入门指南运行示例，但它似乎将示例 lib 文件夹中的所有 js 组件作为单独的资源加载。我如何获得它来构建我刚刚从我的 html 中引用的单个 material-ui.js(或 material-ui.min.js)文件？我使用 npm、gulp、browserify 等吗？如果是这样，如何？我一点也不熟悉 javascript 构建和打包工具。我只想在我的静态资源中包含一个 js 文件，比如 react.min.js

Answer 1

npm install material-ui
npm install -g webpack
webpack node_modules/material-ui/lib/index.js material-ui.js

您可能正在使用 babel 来转换您的内联 jsx(即，遵循 React 教程)，因此您可以使用 es6 导入语法:

import React from 'react';
import FlatButton from 'material-ui/lib/flat-button';

整个脚本 block 是:

<script type="text/babel">      
    import React from 'react';
    import FlatButton from 'material-ui/lib/flat-button';


    const FlatButtonExampleSimple = () => (
      <div>
        <FlatButton label="Default" />
        <FlatButton label="Primary" primary={true} />
        <FlatButton label="Secondary" secondary={true} />
        <FlatButton label="Disabled" disabled={true} />
      </div>
    );      

    ReactDOM.render(
      <FlatButtonExampleSimple />,
      document.getElementById('content')
    );
</script>