2016-04-23 12 views
1

私は、ビルダープロジェクトを自分のアプリケーションソースプロジェクトとは別のパターンにしてwebpack + babel-loaderを使用しようとしています。基本的にbabel-loaderを使用したWebpack:ビルドプロジェクトの外にあるエントリポイントを使用する

/builder-project/build.js 
/app-project/app.js 

build.jsで:

var webpack = require('webpack'); 

var compiler = webpack({ 
    entry : './../app/app.js', 
    output : { 
     filename : 'out.js' 
    }, 
    bail : true, 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /(node_modules|bower_components)/, 
       loader: 'babel-loader', 
       query: { 
        presets: ['es2015'] 
       } 
      } 
     ] 
    } 
}); 

compiler.run(function(err, stats) { 
    console.log(err); 
}); 

そしてapp.jsは、基本的なES6モジュールが含まれています。

実行中のbuild.js私はCouldn't find preset "es2015" relative to directory [absolute-path-on-my-machine]/app-projectを取り除くことができません。基本的には、babel-loaderをサポートしているnpmモジュールを、ビルドスクリプトではなくエントリポイントのパスを基準にして探しています。

webpackの設定でcontextresolveの部分を試しましたが、webpack/babel-loaderがエントリポイントに対してその内容を読み込まないように見えません。私にとっては、エントリポイントではなく、ビルドスクリプトに相対的なライブラリパスを維持する方が理にかなっていますが、そのように設計されていない可能性があります。

UPDATE

ので@nilsから以下の回答は間違いなくすぐに問題を解決しました。しかし、同じ問題が2番目に含まれるモジュール内で再び起こっています。私は上記のそれのソースが含まれていますが、見ていなかった。

app.js

import Factory from './../../vendor/factory-project/factory.js'; 

var App = Factory.define({ 
    //... 
}); 

export default App; 

factory-projectフォルダがnpmで初期化し、node_modulesを持っています。ビルドを実行すると、ローダーはで正常に動作するようになりましたが、その中にimportを処理するときと同じエラーが発生します:Couldn't find preset "es2015" relative to directory [some-path-on-my-machine]/factory-project答えの中にresolveLoaderを使ってみても同じように見えますが、npmで初期化されたプロジェクトフォルダからファイルをインクルードすると無視されるようです。

UPDATE 2

この原因既知のバグがあります。回避策については、私の答えを参照してください。

答えて

2

あなたはresolveオプションに近いですが、resolveLoaderと呼ばれるものがあります。

From the documentation:

重要:ここローダーは、彼らが適用されているリソースに関連して解決されています。これは、構成ファイルに対して解決されていないことを意味します。 npmからローダーがインストールされていて、node_modulesフォルダーがすべてのソースファイルの親フォルダーにない場合、webpackはローダーを見つけることができません。 node_modulesフォルダーをresolveLoader.rootオプションの絶対パスとして追加する必要があります。 (resolveLoader:{ルート:パス。(__ dirnameは、 "node_modules")に参加})

は、あなたのnode_modulesフォルダがbuild.jsと同じフォルダ内にある、あなたは次のように記述したと仮定すると:

var compiler = webpack({ 
    entry : './../app/app.js', 
    output : { 
     filename : 'out.js' 
    }, 
    bail : true, 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /(node_modules|bower_components)/, 
       loader: 'babel-loader', 
       query: { 
        presets: ['es2015'] 
       } 
      } 
     ] 
    }, 
    resolveLoader: { 
     root: path.resolve(__dirname, 'node_modules') 
    } 
}); 
+0

ハァッ、オハイオ州、あなたのソリューションは、おかげで助けてくれました。しかしそれはそれより複雑です。私の 'app.js'内には' import 'という別のモジュールが 'import otherModule from'から' ./../../ other-project/module.js''という別のプロジェクトの中に入っています。 'other-project'の中に' node_modules'があるので、そのディレクトリで同じ ''プリセットを見つけることができませんでした 'es2015'相対的なディレクトリ 'エラーが発生しています。 'resolveLoader'がオーバーライドされているようです。それ以上のご意見は大歓迎です! – Dan

+0

ちょっと分かります:もう一方のプロジェクトの他のモジュールを含めないと機能しますか?いずれにしても、webpackのインスタンスを1つだけ実行していると仮定すると、別のプロジェクトのファイルも含めて問題にしないでください。 'path.resolve(__ dirname、 'node_modules')'が正しいディレクトリを指していると確信していますか? 'console.log'を試してみてください。 – nils

+0

'app.js'内に他のモジュールを含めないと動作しますので、' resolveLoader'パスは正しいです(技術的に私の元の質問に答えています)。しかし、 'npm'で初期化されたモジュールを外部ディレクトリからインポートすると、何か問題が再発するようです。 – Dan

1

だから、これは既知のバグであると思われます: https://github.com/babel/babel-loader/issues/166

私は動作するはず何だから@nils'の答えを受け入れるつもりですが、バグが解決されるまで、1はを置くの回避策を使用する必要があります。プレビューの:

var compiler = webpack({ 
    entry : './../app/app.js', 
    output : { 
     filename : 'out.js' 
    }, 
    bail : true, 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /(node_modules|bower_components)/, 
       loader: 'babel-loader', 
       query: { 
        presets: [require.resolve('babel-preset-es2015')] 
       } 
      } 
     ] 
    }, 
    resolveLoader: { 
     root: path.resolve(__dirname, 'node_modules') //no work :(
    } 
}); 
関連する問題