如何在浏览器内的Babel中包含webpack？

Question

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

[在我的本地项目中，我也将CDN用于babel并做出反应，如下所示。

    <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/[email protected]/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可用，您发现的许多插件文档都没有考虑到这种开发设置类型，但是确实可以使用。