Question

我看到很多用于var React = require('react')语法的反应结构示例。当我尝试使用它时，我得到＆＃34;要求未定义＆＃34;。如何使用和设置我的静态项目以使用require语法？

更新

实际上我正在寻找一个webpack / browserify配置文件，所以我可以快速开始使用React和CommonJS。我只编写了没有上述构建工具的反应应用程序

Answer 1

require不是React api，也不是本机浏览器api（现在）。

require来自commonjs，最着名的是在node.js中实现，如果你使用了node.js，你会看到无处不在。

由于节点中require的普及，人们已经构建了一些工具，可以将以nodejs样式编写的代码转换为可在浏览器上使用。

使用require有一些好处，它可以帮助您保持代码模块化，对于某些项目，它允许您编写同构代码（在客户端和服务器上运行且代码最小化的代码）

为了使用require，您需要使用webpack或browserify等工具，我将使用browserify作为示例。

首先创建一个＆＃39; index.js＆＃39;

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>

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

现在您可以继续编码，您可以通过执行

在代码中添加反应

npm install react --save

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

var React = require('react');

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

Answer 2

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

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

        ],

这当然不那么冗长，并不是所有的开发者都喜欢它，但是知道很好：）

如何使用react需要语法？

2 个答案: