Browserify 找不到本地模块答案

【问题标题】：Browserify can't find local moduleBrowserify 找不到本地模块
【发布时间】：2017-10-27 08:26:24
【问题描述】：

我有同样的问题，但本地组件。

那是我的树：

app
|
 - assets
  |
   - js
    |
     - app.jsx
    |
     - MainComponent.jsx

但是当我运行命令时：

macpro:app user$ browserify assets/js/app.jsx > tesapp.js

它响应错误：

错误：无法从以下位置找到模块“MainComponent” '/Users/user/WebstormProjects/gowithme/app/assets/js'

这是app.jsx文件的代码：

var React = require('react');
var ReactDOM =  require('react-dom');
var  MainComponent  = require('MainComponent');
console.log("Test",MainComponent);

【问题讨论】：

使用本地模块时需要使用本地路径，如：require('../../MainComponent')。绝对路径用于获取node_modules 模块。
不是node模块，MainComponet和app.jsx在同一层级

标签： javascript reactjs gruntjs browserify

【解决方案1】：

这是因为您使用了.jsx 扩展名。默认情况下，browserify 无法识别未知扩展。将browserifyOptions 添加到您的 grunt 配置中，它可能会有所帮助：

options: {
    transform: [['babelify', {presets: ['es2015', 'react']}]],
    browserifyOptions: {
        debug: true,
        extensions: ['.jsx']
    }
}

另外我建议省略.jsx 的使用。 No .jsx extension?

【讨论】：

谢谢你节省了我的时间。我不知道如何解决它。

【解决方案2】：

当您使用require 加载本地模块（即您自己的.js 文件）时，您需要提供相对路径：

var React = require('react');
var ReactDOM =  require('react-dom');
var  MainComponent  = require('./MainComponent'); //added ./ so now the path is relative
console.log("Test",MainComponent);

当使用绝对路径（如require('fs') 或require('react')）时，节点将尝试加载本机模块（如fs、path 等）或node_modules 内的模块。

https://nodejs.org/api/modules.html#modules_modules

【讨论】：

与 ./ 相同的问题错误：无法从 /Users/user/WebstormProjects/gowithme/app/assets/js 找到模块 './MainComponent'