递归要求找不到 Browserify 模块（Babel 后转译）答案

【问题标题】：Browserify module not found with recursive require (post-Babel transpile)递归要求找不到 Browserify 模块（Babel 后转译）
【发布时间】：2015-12-14 05:45:27
【问题描述】：

我有从同一目录中的文件导入的 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"
  }
}

【问题讨论】：

请阅读标签说明！ babel 是针对具有该名称的 Python 库的问题。
抱歉，感谢您的回复。

标签： javascript reactjs browserify babeljs

【解决方案1】：

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

每个使用 JSX 语法的文件（例如 <Header />）都需要导入 React。您收到错误是因为您没有在 index.js 中执行此操作，并且一旦您执行此操作，它就会起作用。

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

【讨论】：