如何创建素材-ui.js文件？

Question

我遵循“入门指南”并让示例运行，但它似乎将示例lib文件夹中的所有js组件作为单独的资源加载。我如何让它构建一个单一的资料-ui.js(或资料-ui.min.js)文件，我只是从我的html引用？我是否使用npm，吞咽，褐变等？如果是这样的话，是怎么做的？我对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 (即。)，因此您可以使用es6导入语法：

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

整个脚本块是：

<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>

Answer 2

你得跟着那些家伙

首先转到示例文件夹

cd <project folder>/material-ui/examples/browserify-gulp-example

运行这个

npm install

它将安装package.json中描述的所有必需的软件包。

然后

npm start

它将运行web服务器。

终于喝了一口

gulp

它将运行这里描述的所有吞吐任务。

褐化-吞咽-示例/吞咽/任务

因此，您将在build文件夹中附带文件app.js。

您可以像通常一样将它包含在html中。

<script src="app.js"></script>

现在您可以运行http://localhost:3000并检查结果