Browserify：无法从“...”中找到模块“...”（Coffeescript + React）

Question

我正在使用 React 和 Browserify 并尝试需要一些组件，但我得到了错误：

Error: Cannot find module './components/pages/Home' from '/.../.../reactCoffee/app/scripts'

有问题的文件是 index.cjsx（使用 coffeescript）：

React = require 'react'
Router = require 'react-router'
Routes = Router.Routes
Route = Router.Route
DefaultRoute = Router.DefaultRoute

Home = require './components/pages/Home'
About = require './components/pages/About'

React.render((
  <Router>
    <Route name='home' path='/' handler={Home}>
      <Route name='about' path='about' handler={About} />
    </Route>
  </Router>
), document.querySelector '#spa')

我想要的文件是：

React = require 'react'
Header = require 'components/Header'
Footer = require 'components/Footer'
Store = require 'Store'
Actions = require 'Actions'

Home = React.createClass

  ...

  render: ->
    return
      <div>
        <Header />
          <h1> HI from React and CJSX </h1>
        <Footer />
      </div>

module.exports = Home

文件结构：

.
├── gulpfile.js
├── package.json
└── app
    ├── styles
    ├── index.html
    └── scripts
        └── index.cjsx
        └── components
            └── Header.cjsx
            └── Footer.cjsx
            └── pages
                └── Home.cjsx
                └── About.cjsx

Answer 1

指定文件的扩展名，因为它不是 Browserify 知道的

Home = require './components/pages/Home.cjsx'

或者你可以在你的 package.json 中添加类似的东西来通知 Browserify 额外的文件扩展名。

"browserify": {
    "extension": [ "cjsx" ]
}