Browserify 找不到本地模块

Question

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

那是我的树：

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

但是当我运行命令时：

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

它响应错误：

Error: Cannot find module 'MainComponent' from '/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);

Answer 1

当你使用 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

Answer 2

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

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

我还建议省略 .jsx 的用法。 No .jsx extension?

Browserify 找不到本地模块

Browserify can't find local module

javascript

browserify

gruntjs

reactjs