Question

继续这个问题：How to create material-ui.js file?

我无法弄清楚如何在我的页面脚本中使用material-ui组件。材料-ui组件不在范围内。我没有使用babel或任何其他编译步骤;只需在我的页面上加载预先构建的js文件并使用JSXTransformer。

e.g。我的HTML是：

<html>
    <head>
        <title>Home</title>
        <script src="static/js/react-with-addons.js"></script>
        <script src="static/js/JSXTransformer.js"></script>
        <script src="static/js/material-ui.js"></script>
    </head>
    <body>
        <div id="app">
            <script src="static/js/app.jsx" type="text/jsx"></script>
        </div>
        <div>Some text</div>
    </body>
</html>

我根据引用的问题构建了react和material-ui库，例如

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

并将生成的js文件复制到我的静态文件文件夹。

这是我的app.jsx：

React.render(
    <div>
        <h1>Hello world!</h1>
        <RaisedButton label="My Button"/>
    </div>,
    document.getElementById("app")
);

我在Chrome中遇到此错误：Uncaught ReferenceError: RaisedButton is not defined

我希望material-ui组件在范围内，但似乎不是。在Chrome控制台上，我可以输入window.并查看范围内的名称列表。这包括React，但看起来不像材料ui。

如何在浏览器中获取webpack构建的material-ui库组件？

0 个答案: