帶有babel-loader的Webpack：使用構建項目之外的入口點

我試圖使用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配置context和resolve收杆，但似乎無法的WebPack /巴貝爾，裝載機的東西相對不加載到我的入口點。對我來說，保持庫路徑相對於構建腳本而不是入口點會更有意義，但也許事情不是這樣設計的？

UPDATE

所以從@nils下面的答案肯定是解決眼前的問題。但是，第二個包含的模塊中又出現了同樣的問題。我不包括它的源代碼之上，但一看：

app.js：

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

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

export default App;

的factory-project文件夾初始化npm並具有node_modules。當我運行構建時，儘管加載器現在可以在app.js上正常工作，但它在處理其中的import時會引發與以前相同的錯誤：Couldn't find preset "es2015" relative to directory [some-path-on-my-machine]/factory-project。它看起來像即使在答案中使用resolveLoader時，它似乎被忽略時包括從npm初始化的項目文件夾中的文件。

更新2

有一個已知的bug導致此。有關解決方法，請參閱下面的答案。

來源

2016-04-23 Dan

您與resolve選項非常接近，有一個名爲resolveLoader。

From the documentation:

重要提示：這裏的裝載機相對於它們所應用到的資源得到解決。這意味着它們不會相對於配置文件被解析。如果你使用npm安裝了加載程序，並且你的node_modules文件夾不在所有源文件的父文件夾中，那麼webpack無法找到加載程序。您需要將node_modules文件夾添加爲resolveLoader.root選項的絕對路徑。（resolveLoader：{root：path。加入（__目錄名稱，「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') 
    } 
});

來源

2016-04-23 20:31:59 nils

哈，好的，所以你的解決方案確實有幫助，謝謝。然而它比這更復雜。在我的'app.js'中，我有一個'import'，用於在另一個項目中引用另一個模塊，'從./../../ other-project/module.js''導入otherModule。因爲'other-project'中有一個'node_modules'，所以現在我得到的是相對於該目錄下目錄錯誤的「無法找到預設」es2015「。似乎'resolveLoader'正在被覆蓋。任何進一步的想法，非常感謝！ – Dan

只需做到明確：當您不包含另一個項目中的其他模塊時它是否工作？無論哪種方式，假設你只運行一個webpack實例，包括來自另一個項目的文件不應該成爲問題。你確定'path.resolve（__ dirname，'node_modules'）'指向正確的目錄嗎？試試'console.log'。 – nils

當我沒有在'app.js'中包含其他模塊時，它工作正常，所以'resolveLoader'路徑是正確的（技術上我的原始問題已被回答）。但奇怪的是，從已用'npm'初始化的外部目錄導入模塊似乎再次破壞了一切。 – Dan

所以看上去這是一個已知的bug ： https://github.com/babel/babel-loader/issues/166

我要去接受@nils的回答，因爲這是應該的工作，但直至錯誤解決必須使用把一個的解決方法中的預設：

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 :(
    } 
});

來源

2016-04-30 19:51:21 Dan

帶有babel-loader的Webpack：使用構建項目之外的入口點

回答

相關問題