browserify包不處理通過相對路徑導入文件

Question

我正在使用browserify和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定義的。

browserify不處理這樣的事情，是否還有另一個工具，我應該使用另外，還是我做別的不正確？

Answer 1

您必須將paths添加到您的browserify選項。如果你不添加，那麼browserify不知道去哪裏尋找你的模塊。

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

    browserify: { 
     options:{ 
     browserifyOptions: { 

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

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

這是一個issue他們解決之前。