如何使用 react require 语法？

Question

我看到很多用 var React = require('react') 语法结构化的例子。当我尝试使用它时，我得到 "require is not defined"。如何使用和设置我的静态项目以使用 require 语法？

更新

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

Answer 1

require 不是 React api，也不是原生浏览器 api（目前）。

require 来自 commonjs，最著名的实现是 node.js，如果你用过 node.js，你会发现 require 无处不在。

由于 require 在 node 中的流行，人们已经构建了工具，可以将以 nodejs 风格编写的代码转换为可在浏览器上使用。

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

为了使用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*/}
})

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 require 语法？

how to use react require syntax?

javascript

node.js

reactjs

webpack