我看到很多使用var React = require('react')
语法结构化react的例子。当我尝试使用它时,我得到“未定义要求”。如何使用和设置我的静态项目以使用 require 语法?
更新
实际上,我正在寻找一个 webpack/browserify 配置文件,以便我可以快速开始使用 React 和 CommonJS。我只写过没有说构建工具的react应用程序
我看到很多使用var React = require('react')
语法结构化react的例子。当我尝试使用它时,我得到“未定义要求”。如何使用和设置我的静态项目以使用 require 语法?
更新
实际上,我正在寻找一个 webpack/browserify 配置文件,以便我可以快速开始使用 React 和 CommonJS。我只写过没有说构建工具的react应用程序
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'
})
],
这当然不那么冗长,并非所有开发人员都喜欢它,但很高兴知道:)