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

Question

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

Answer 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 并检查结果

Answer 2

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>

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

How to create material-ui.js file?

javascript

material-ui