uygulama tepki

Question

TLDR WebPack bir test giriş noktası oluşturmanız Dosya, tüm bağımlılık zinciri kırılır.

(benim webpack React.js uygulamasında) bazı zorluklar require benim app/test dizinden bileşenleri -ing yaşıyorum bunun altında ben /app klasörde başka dosyadan -ing hiçbir zorluk require var. Bu dizin yapısı benim webpack.config.js içinde

app 
    /components/checkout.jsx 
    /components/button.jsx 
    /test/test.js 
    index.jsx 
dist 
node_modules 
webpack.config.js 
package.json 

, ben bu

entry: { 
    app: "./app/index" 
}, 
module: { 
    loaders: [ 
     { 
      test: /\.jsx$/, 
      loader: 'jsx-loader?insertPragma=React.DOM&harmony', 
    } 
    ] 
}, 
resolve: { 
extensions: ['', '.js', '.jsx'] 
} 

gibi benim Tepki uygulama için JSX-yükleyici kullanmak o kurulum var Bu beni biten dosyaları istemesine olanak tanır uzantısı .jsx. Örneğin, /app/index.jsx I

var Checkout = require('./components/Checkout') 

Ve içeride /app/components/checkout.jsx yaparak /app/components/checkout.jsx gerektiren ben index.jsx gelen Checkout gerektiren zaman düğmeye böylece

var Button = require('./components/Button') 

gerektirir, bunun gerektiren işler Herhangi bir sorun olmadan düğme.

Ancak, uygulama/test/test.js gelen, ben

var Checkout = require('../components/Checkout') 

yapmak ve webpack Ödeme bileşenini bulamıyor. Webpack dev sunucusundaki testleri görüntülediğimde, .jsx dosya uzantısının arandığını göstermez. Ben Test dizinden bu

var Checkout = require(jsx-loader!'../components/Checkout') 

gibi jsx-loader inline kullanmaya çalıştı nedenle

app/components/Checkout 
app/components/Checkout.webpack.js 
app/components/Checkout.web.js 
app/components/Checkout.js 
app/components/Checkout.json 

aradı ve webpack şimdi dosyayı bulabilirsiniz, ama buna çözemezse belirten bir hata atar Checkout requires. Başka bir deyişle, app/test klasöründen require'u kullandığımda, tüm bağımlılık zinciri eşitlenmez.

Bu dizin yapısındaki sınamalarda ya da daha genel olarak web paketini bir uygulama dosyasında bir uygulama dosyası gerektirecek şekilde nasıl yapılandırabilmem için webpack.config.js adresimi nasıl değiştirebilirim?

Güncelleme

Proje yapısı

/app 
    /test/test.js 
    /index.jsx 
    /components/checkout.jsx (and button.jsx) 
/dist 
/node_modules 
package.json 
webpack.config.js 

bütün webpack yapılandırma

var webpack = require('webpack'); 
module.exports = { 
    context: __dirname + "/app", 
    entry: { 
     vendors: ["d3", "jquery"], 
     app: "index" 
     // app: "./app/index" 

     }, 
    output: { 
     path: './dist', 
     filename: 'bundle.js', //this is the default name, so you can skip it 
     //at this directory our bundle file will be available 
     //make sure port 8090 is used when launching webpack-dev-server 
     publicPath: 'http://localhost:8090/assets/' 
    }, 

    externals: { 
     //don't bundle the 'react' npm package with our bundle.js 
     //but get it from a global 'React' variable 

     'react': 'React' 
     // 'd3': 'd3' 
    }, 
    resolve: { 
     modulesDirectories: ['app', 'node_modules'], 
     extensions: ['', '.js', '.jsx'], 
     resolveLoader: { fallback: __dirname + "/node_modules" }, 
     root: ['/app', '/test'] 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx$/, 
       loader: 'jsx-loader?insertPragma=React.DOM&harmony', 
      } 
     ] 
    }, 

    plugins: [ 
    // definePlugin, 
    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js') 

    ] 
} 

Answer 1

Olası bir çözüm olacaktır için daima dosya uzantısına sahip gerektirir:

var Checkout = require('./components/Checkout.jsx') 

Answer 2

"Test" in bir root dizini olarak ayarlanması doğru olabilir. Ancak kodunuzu paylaşana kadar net değil. GitHub repo ya da bir şey için bir link verebilir misiniz?

Answer 3

Uyum parametresini kullandığınızı görüyorum, kullandığınızı varsayabilir miyim, es6?

Eğer daha önce böyle bir problem yaşanmış olsaydı, sorun benim için eklediğim dosyaların, ekledikleri es6, dönüştürülmeden, es5 ile jsx-loader/babel-loader.

yüzden eklemek için gerekli:

preLoaders: [{ 
    test: [/\.jsx$/, /\.js$/], 
    include: // modules here 
    loaders: ['babel-loader?optional[]=runtime'] 
}] 

ama bu sadece sizin testler için başarısız neden o zaman açıklamaz. Belki de sizin testlerinizi çalıştırdığınızda ne zaman çalıştırılacağını ayrıntılı olarak açıklayabiliyorsunuz, ancak yukarıdaki durum sizin için geçerli değilse, şu an için hala es6,

'u kullandığınız varsayımı altında çalışabilirsiniz, yerel bir web paketi sürümünü yüklemeyi deneyin, başka webpack kurulumunda, ps config bakarak, resolveLoader sizin kararlılığının bir parçası olmamalı: ve bu

düzenlemek yardımcı uygulama klasör için de, yerel dir bunun için

(resolveLoader: { root: path.join(__dirname, "node_modules") }) 

umut bakmak Kullanıyorum,

çözümleme için aşağıdaki kurulum var

resolve: { 
    extensions: ['', '.js', '.jsx', '.json'], 
    modulesDirectories: ['node_modules', 'node_modules/vl_tooling/node_modules'] 
}, 
resolveLoader: { 
    modulesDirectories: ['node_modules', 'node_modules/vl_tooling/node_modules'] 
}, 

Answer 4

Ben kurulum testleri Tepki çalıştırmak için ayrı yudum görev, belki fikrini yeniden verebilecek:

karma.js

var karma = require('gulp-karma'), 
    _ = require('lodash'), 
    Promise = require('bluebird'), 
    plumber = require('gulp-plumber'), 
    path = require('path'), 
    webpack = require('gulp-webpack'), 
    named = require('vinyl-named'); 

module.exports = function (gulp, options) { 
    var root = path.join(options.cwd, 'app'), 
    extensions = ['', '.js', '.jsx'], 
    modulesDirectories = ['node_modules']; 

    gulp.task('karma', ['karma:build'], function() { 
    return runAllTests(gulp, options); 
    }); 

    gulp.task('karma:build', function() { 
    var optionsForTests = _.merge({ 
     ignore: ['**/node_modules/**'] 
    }, options); 

    return gulp.src(['**/__tests__/*.js'], optionsForTests). 
     pipe(named(function(file){ 
     // name file bundle.js 
     return 'bundle'; 
     })). 
     pipe(webpack({ 
     module: { 
      loaders: [ 
       // runtime option adds Object.assign support 
       { test: /\.(js|jsx)$/, loader: 'babel-loader?optional[]=runtime', exclude: /node_modules/}, 
       { test: /\.(sass|scss)$/, loader: 'css-loader!sass-loader'}, 
       { test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/, loader: 'url-loader'}, 
       { test: /\.(ttf|eot)$/, loader: 'file-loader'}, 
       { test: /sinon.*\.js$/, loader: 'imports?define=>false' } // hack due to https://github.com/webpack/webpack/issues/304 
      ] 
     }, 
     resolve: { 
      root: root, 
      extensions: extensions, 
      modulesDirectories: modulesDirectories 
     } 
     })). 
     pipe(gulp.dest('test-build')); 
    }) 

} 

function runAllTests(gulp, options) { 
    var optionsForTests = _.merge({ 
    ignore: ['**/node_modules/**'] 
    }, options); 

    return new Promise(function (resolve, reject) { 
    var karmaConfig = path.join(path.resolve(__dirname, '..'), 'karma.conf.js'); 

    // shim Prototype.function.bind in PhantomJS 1.x 
    var testFiles = [ 
     'node_modules/es5-shim/es5-shim.min.js', 
     'node_modules/es5-shim/es5-sham.min.js', 
     'test-build/bundle.js']; 

    gulp.src(testFiles). 
     pipe(plumber({ 
     errorHandler: function (error) { 
      console.log(error); 
      this.emit('end'); 
     } 
     })). 
     pipe(karma({ 
     configFile: karmaConfig, 
     action: 'run' 
     })). 
     on('end', function() { resolve(); }); 
    }); 
} 

Gulp dosyası: terminalden

var gulp = require('gulp'); 
var auctionataBuild = require('auctionata-build'); 
var path = require('path'); 

auctionataBuild.tasks.karma(gulp, { 
    cwd: path.resolve(__dirname) 
}); 

Çalıştır :

gulp karma