使用Webpack和Babel將ES6轉換爲AMD

我在我的應用程序中使用webpack，並將babel轉換爲我的js/jsx文件，從es6轉換爲es5。使用Webpack和Babel將ES6轉換爲AMD

我想讓babel將這些文件中加載的模塊轉換爲AMD。我看到如何用grunt-babel做到這一點： Using Babel to convert ES6 modules to ES5 AMD modules, not working as expected

如果我想要webpack處理babel轉換，我該如何做到這一點？

例如，在webpack.config.js我有：在那裏通天

module: { 
    loaders: [{ 
    test: /\.jsx?$/, 
    exclude: /node_modules/, 
    loader: 'babel' 
    } 
}

我可以設置一個選項，使用AMD？

來源

2015-09-30 Ghan

這是什麼意思？由於webpack仍然捆綁在一起，它們的行爲也是一樣的。 – loganfsmyth

@loganfsmyth - 你的意思是說，在其默認配置中，Babel會將es6的導入轉換爲es5異步模塊加載器？從我看到的情況來看，我認爲它正在轉化爲commonjs，這就是我爲什麼要明確地將其設置爲AMD的原因。但如果我錯了，請告訴我。謝謝！ – Ghan

我的觀點是，即使你告訴Babel創建AMD模塊，你也不要緊，因爲最終的結果是一個Webpack軟件包，它既不是CommonJS也不是AMD，並且單個文件是AMD沒有區別。 – loganfsmyth

可以爲巴貝爾的選擇與query鍵：

module: { 
    loaders: [{ 
    test: /\.jsx?$/, 
    exclude: /node_modules/, 
    loader: 'babel', 
    query: { 
     modules: 'amd' 
    } 
    } 
}

對於所有可用的選項看看這裏：如果你想生成整束作爲AMD模塊http://babeljs.io/docs/usage/options/

來源

2015-09-30 22:34:52

謝謝，看起來像'查詢'伎倆！ – Ghan

，你可以設置在「output.libraryTarget」配置：

{ 
    output: { 
    libraryTarget: "amd" 
    } 
}

看到這裏，在「output.libraryTarget」： https://webpack.github.io/docs/configuration.html

來源

2015-09-30 23:25:39 lyosef

這似乎爲我工作。（並且接受的答案沒有。）我的用例：已經將webpack/es6設置爲其他用途，並希望輸出可以在基於requirejs的另一個應用程序中使用的模塊。 – Sigfried

使用Webpack和Babel將ES6轉換爲AMD

回答

相關問題