Browsify bundle не обрабатывает импорт файлов через относительный путь

Question

Я использую браузер и babel для компиляции и связывания своего приложения-приложения. Файлы с client/ объединены в один файл static/bundle.js. Но я использую относительный импорт, который, похоже, не обрабатывается правильно.

Вот моя структура файла

client/ 
    components/ 
     main.js 
    App.js 
static/ 
    bundle.js 
gulpfile.js 

и вот мой gulpfile и импорт обижая

// client/App.js 

import React, { Component } from 'react'; 
import { render } from 'react-dom'; 
import App from './components/main.js'; 


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


// gulpfile.js 

var gulp = require('gulp'); 
var browserify = require('browserify'); 
var babelify = require('babelify'); 
var source = require('vinyl-source-stream'); 

gulp.task('build', function() { 
    browserify({ 
    entries: 'client/App.js', 
    extensions: ['.js'], 
    debug: true 
    }) 
    .transform(babelify, {presets: ['es2015', 'react']}) 
    .bundle() 
    .pipe(source('bundle.js')) 
    .pipe(gulp.dest('static')); 
}); 

Проблема заключается линия import App from './components/main.js';.

Когда я смотрю в static/bundle.js, есть строка var _main = require('./components/main.js');, которая не имеет смысла, поскольку относительно bundle.js нет ./components/main.js. Это было определено относительно client/App.js.

Обоснован ли браузеру не обрабатывать такие вещи и есть ли еще один инструмент, который я должен использовать дополнительно, или я делаю что-то еще неправильное?

Answer 1

Вы должны добавить paths в параметры вашего браузера. Если вы не добавите, что браузер не знает, где искать ваш модуль.

module.exports = function(grunt){ 
    grunt.initConfig({ 

    browserify: { 
     options:{ 
     browserifyOptions: { 

      // ... 
      paths: [ 
      './node_modules', 
      './client' 
      ] 

     } 
     }, 
     // ... 
    }, 
    // ... 
    }); 
} 

Это было issue, прежде чем они решают проблему.