2

我遵循了入门指南并运行了示例，但它似乎将示例 lib 文件夹中的所有 js 组件作为单独的资源加载。如何让它构建一个我只是从我的 html 中引用的 material-ui.js（或 material-ui.min.js）文件？我是否使用 npm、gulp、browserify 等？如果是这样，怎么做？我完全不熟悉 javascript 构建和打包工具。我只想在我的静态资源中包含一个 js 文件，例如 react.min.js

4

2 回答 2

3 
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';

整个脚本块是：

<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>
于 2016-02-29T04:40:10.953 回答
1

你必须遵循指南

首先转到示例文件夹

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

运行这个

npm install

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

然后

npm start

它将运行网络服务器

最后只运行 gulp

gulp

它将运行此处描述的所有 gulp 任务

browserify-gulp-example/gulp/tasks

结果，您将在构建文件夹中附带文件 app.js

您可以像往常一样将其包含在您的 html 中

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

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

于 2015-10-02T05:55:58.620 回答