Javascript 如何使用react require语法?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/33248012/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 14:50:41  来源:igfitidea点击:

how to use react require syntax?

javascriptnode.jsreactjswebpack

提问by Connor Leech

I see lots of examples for react structured with var React = require('react')syntax. When I try and use this I get "require is not defined". How do I use and set up my static project to use require syntax?

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

Update

更新

In actuality I am looking for a webpack/browserify config file so I can get started with React and CommonJS quickly. I have only written react apps without said build tools

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

回答by Yang Li

require is not a React api, nor is it a native browser api (for now).

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

require comes from commonjs and is most famously implemented in node.js, if you have used node.js, you will see requires everywhere.

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

due to the popularity of require in node, people have built tools which will transform code that is written in nodejs style to be useable on the browser.

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

there's a few benefits to using require, it helps you keep your code modular and for some projects it allows you to write isomorphic code (code that runs both on client and server with minimal change)

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

In order to use require, you will need to use a tool such as webpack or browserify, I will use browserify as an example.

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

first create an 'index.js'

首先创建一个'index.js'

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

then create an app.js

然后创建一个 app.js

alert('app works');

next install the browserify cli

接下来安装 browserify cli

npm install -g browserify

And call this command in your shell

并在您的 shell 中调用此命令

browserify index.js > bundle.js

Now you will have a bundle.js, in your html page create a

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

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

And you should see both alerts run

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

Now you can continue to code, you can add react in your code by doing a

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

npm install react --save

and then require it in app.js for example

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

var React = require('react');

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

回答by danikoren

BTW, If you are using webpack you can add to your webpack.config.js config file The following lines, eliminating the need to use require statements in your files:

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

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

        ],

This is of course less verbose and not all developers like it, but it's good to know :)

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