Question

我有Browserify条目文件 index.js ，它从同一目录中的文件和'react-dom'中的'render'函数导入，安装在node_modules中（请参阅 Package.json 进行版本控制） -

// index.js
import { Header } from './header'
import { render } from 'react-dom'

render(<Header />, document.getElementById('root'));

我还有另一个文件 header.js ，它会导入'react'并创建一个简单的React类 -

// header.js
import React from 'react'

export const Header = React.createClass({
    render:() => {
        return (
            <div>
                some header title
            </div>
        )
    }
});

我使用Babel来转换es6代码，因此“import”语句映射到必要的“require”语句。据我所知，这一步正常。在使用Babel进行转换后，我使用Browserify将所有依赖项打包到一个文件中。我遇到的问题是，当我尝试渲染打包的javascript时，我得到“Uncaught ReferenceError：React is not defined”。

看起来导入在 index.js 中运行良好，但在 header.js 。例如，如果 index.js 中的import React from 'react'，则所有内容都会正确呈现。看起来我遇到了递归需求的问题，但我似乎无法弄清楚为什么会出现这种情况。任何想法将不胜感激。我很乐意提供更多信息。

供参考，以下是 Package.json 的摘录 -

{ "dependencies": { "babel-preset-es2015": "~6.3.13", "babel-preset-react": "~6.1.18", "babel-register": "~6.2.0", "history": "^1.12.0", "material-ui": "^0.13.4", "react": "^0.14.3", "react-dom": "^0.14.3", "react-router": "~1.0.0", "react-tap-event-plugin": "^0.2.1" }, "devDependencies": { "browserify": "~11.2.0", "del": "^2.1.0", "express": "~4.13.3", "express-urlrewrite": "~1.2.0", "gulp": "~3.9.0", "gulp-autoprefixer": "^3.1.0", "gulp-babel": "~6.1.1", "gulp-print": "~2.0.1", "gulp-rename": "~1.2.2", "gulp-sass": "~2.1.0", "gulp-sourcemaps": "1.6.0", "gulp-uglify": "^1.5.1", "vinyl-buffer": "^1.0.0", "vinyl-source-stream": "^1.1.0" } }

Answer 1

例如，如果我在index.js中import React from 'react'，那么一切都正确呈现

每个使用JSX语法的文件（例如<Header />）都需要导入React。你得到错误是因为你没有在index.js中这样做，而且一旦你这样做就会有效。

如果您查看已编译的代码，您会看到<Header />已转换为React.createElement(Header)。

没有找到带有递归需求的Browserify模块（后Babel transile）

1 个答案: