未找到递归要求的Browserify模块(后Babel transpile)

Question

我有Browserify入口文件index.js，它从同一个目录中的一个文件中导入，以及从node_modules中安装的‘function dom’中的'render‘函数(关于版本控制，请参见Package.json )-

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

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

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

// header.js
import React from 'react'

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

我使用Babel来转换es6代码，以便“导入”语句映射到必需的"require“语句。据我所知，这一步正在正常工作。在使用Babel转换后，我使用Browserify将所有依赖项打包到一个文件中。我遇到的问题是，一旦我尝试呈现打包的javascript，我就会得到一个“未定义的ReferenceError: React未定义”。

看起来导入在index.js中工作得很好，但在header.js中没有得到正确的解决。例如，如果我在import React from 'react' in index.js中，所有内容都会正确呈现。看起来，我在递归需求方面遇到了问题，但我似乎不明白为什么会这样。任何想法都将不胜感激。我也很乐意提供更多的信息。

作为参考，这是我的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

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

每个使用JSX语法的文件(例如<Header />)都需要导入响应。您会得到错误，因为您没有在index.js中执行该操作，并且一旦执行该操作，它就会工作。

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