如何使用react require语法?

IT技术 javascript node.js reactjs webpack
2021-05-24 05:48:34

我看到很多使用var React = require('react')语法结构化react的例子当我尝试使用它时,我得到“未定义要求”。如何使用和设置我的静态项目以使用 require 语法?

更新

实际上,我正在寻找一个 webpack/browserify 配置文件,以便我可以快速开始使用 React 和 CommonJS。我只写过没有说构建工具的react应用程序

2个回答

require 不是 React api,也不是本机浏览器 api(目前)。

require 来自 commonjs,最著名的是在 node.js 中实现,如果你用过 node.js,你会在任何地方看到 requires。

由于 node 中 require 的流行,人们已经构建了一些工具来转换以 nodejs 风格编写的代码,以便在浏览器上可用。

使用 require 有一些好处,它可以帮助您保持代码module化,并且对于某些项目,它允许您编写同构代码(代码在客户端和服务器上运行,更改最少)

为了使用require,你需要使用webpack或browserify之类的工具,我以browserify为例。

首先创建一个'index.js'

require('./app.js');
alert('index works');

然后创建一个 app.js

alert('app works');

接下来安装 browserify cli

npm install -g browserify

并在您的 shell 中调用此命令

browserify index.js > bundle.js

现在您将拥有一个 bundle.js,在您的 html 页面中创建一个

<script src="bundle.js"></script>

你应该看到两个警报都在运行

现在您可以继续编码,您可以通过执行以下操作在代码中添加react

npm install react --save

然后在 app.js 中要求它例如

var React = require('react');

React.createClass({
    render: function(){/*Blah Blah Blah*/}
})

顺便说一句,如果您使用的是 webpack,您可以将以下几行添加到您的 webpack.config.js 配置文件中,从而无需在您的文件中使用 require 语句:

 plugins: [
            new webpack.ProvidePlugin({
              'React':     'react',
              '$':          'jquery',
              '_':          'lodash',
              'ReactDOM':   'react-dom',
              'cssModule':  'react-css-modules',
              'Promise':    'bluebird'
            })

        ],

这当然不那么冗长,并非所有开发人员都喜欢它,但很高兴知道:)