如何从 cdn js 导入预构建的组件？

Question

我正在尝试使用来自名为 ant design 的库中的一些预内置 React 组件。另外，我想通过 cdnjs 调用 react 和组件库（不想使用 webpack 或其他）。我怎么能完成它？我的方法如下，但对我不起作用。

    <!DOCTYPE html>
    <html>
      <head>
        <title></title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.1.6/antd.min.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/antd/3.1.6/antd.min.js"></script>
      </head>
      <body>
        <div id="root"></div>
        <script type="text/babel">
import Button from 'antd/lib/button';

class Greeting extends React.Component {
    render() {
        return (<p><Button type="primary">Primary</Button></p>);
    }
}
ReactDOM.render(
    <Greeting />,
    document.getElementById('root')
)
</script>
      </body>
    </html>

Answer 1

您不需要导入，因为当您使用预构建版本时，它已经被注入到一个全局变量调用中'antd'（就像 React 一样）

我还稍微更新了您的脚本，因为对于 React，您需要 . umd 版本和 antd 需要 with locale 版本。

但是，强烈不推荐使用预构建版本 小心。

<!DOCTYPE html>
    <html>
      <head>
        <title></title>
        <link rel="stylesheet" href="https://unpkg.com/antd/dist/antd.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.production.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
        <script src="https://unpkg.com/moment/min/moment-with-locales.js"></script>
        <script src="https://unpkg.com/antd/dist/antd-with-locales.js"></script>
      </head>
      <body>
        <div id="root"></div>
        <script type="text/babel">
            const { Button } = antd;

            class Greeting extends React.Component {
                render() {
                    return (<p><Button type="primary">Primary</Button></p>);
                }
            }
            ReactDOM.render(
                <Greeting />,
                document.getElementById('root')
            )
</script>
      </body>
    </html>

如何从 cdn js 导入预构建的组件？

How do I import pre built in components from a cdn js?

reactjs

antd