reactjs - 如何在浏览器 Babel 中包含 webpack？

Question

我是 React.js 的新手。出于学习目的，我创建了登录页面，您可以找到 here .

在我的本地项目中，我也使用了 babel 和 React 的 CDN，如下所示。

    <script src="https://unpkg.com/react@latest/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

我想使用one of the form validation plugin进入这个例子。但是当我尝试包含此内容时(根据文档)

import ValidateableForm from 'react-form-validate';

我收到以下错误。

Uncaught ReferenceError: require is not defined

我浏览了几篇文章，他们说我必须使用 webpack 或 Rollup 或 Browsify 。我不知道如何将其包含到我当前的本地项目设置中。由于我没有使用 npm (在学习中我不想使用 npm)

1. 我不知道如何将该插件包含到我的项目中
2. 如果它已经与外部网站一起提供，我无法弄清楚找出问题所在。

请帮我解决这个问题。

Answer 1

这是一个老问题，但至少目前，这对于传统的脚本标签来说是完全可能的。 This article is very helpful for understanding development setup alternatives for React

在那篇文章中，它详细介绍了通过脚本标签引入 React、React-Dom 和 Babel 进行开发，如下所示(我链接到 npm 下载的包，但这不是必需的):

<script src="/node_modules/react/umd/react.development.js"></script>
<script src="/node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="/node_modules/@babel/standalone/babel.min.js"></script>

就我而言，我需要引入react-notification-system插件:

<script src="/node_modules/react-notification-system/dist/react-notification-system.min.js"></script>

(注意编译后的'dist'版本的使用)

一旦包含在内，我就可以像这样使用它:

class MyComponent extends React.Component {
    constructor(props) {
        super(props);

        this.notificationSystem = new ReactNotificationSystem();
    }

    addNotification = event => {
        event.preventDefault();
        const notification = this.notificationSystem.current;
        notification.addNotification({
            message: 'Notification message',
            level: 'success'
        });
    };

    render() {
        return (
            <div>
                <button onClick={this.addNotification}>Add notification</button>
                <ReactNotificationSystem ref={this.notificationSystem} />
            </div>
        );
    }
}

我必须查看插件的代码才能知道名称:ReactNotificationSystem 可用，您发现的许多插件文档都不是根据这种类型的开发设置编写的，但它确实有效。