Как получить встроенные в библиотеку компоненты библиотеки ui в браузере?

Следуя этому вопросу: Как создать файл material-ui.js?

Я не могу понять, как использовать компоненты material-ui в моем скрипте. Компоненты material-ui не входят в объем. Я не использую babel или какой-либо другой этап компиляции; просто загружая предварительно созданные js-файлы на мою страницу и используя JSXTransformer.

например, мой 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>

Я построил библиотеки реагирования и материалов-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

Я бы ожидал, что компоненты материала-ui будут в сфере видимости, но это не так. На консоли Chrome я могу ввести window.и увидеть список имен в области. Это включает в себя «Реакт», но ничего похожего на материал-ui.

javascript,material-ui,

1

Ответов: 0

Как получить встроенные в библиотеку компоненты библиотеки ui в браузере?

Следуя этому вопросу: Как создать файл material-ui.js?

Я не могу понять, как использовать компоненты material-ui в моем скрипте. Компоненты material-ui не входят в объем. Я не использую babel или какой-либо другой этап компиляции; просто загружая предварительно созданные js-файлы на мою страницу и используя JSXTransformer.

например, мой 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>

Я построил библиотеки реагирования и материалов-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

Я бы ожидал, что компоненты материала-ui будут в сфере видимости, но это не так. На консоли Chrome я могу ввести window.и увидеть список имен в области. Это включает в себя «Реакт», но ничего похожего на материал-ui.

01JavaScript, материал-щ,
Похожие вопросы