Webpack將ES6編譯成模塊

Question

我想將ES6編譯爲使用Webpack的文件，但無法弄清楚爲什麼代碼不可用。

邊注：這是爲了對VueJS

一個插件，我開始用一個簡單的文件導出一個單一的功能，如

exports.install =() => { 
    ... 
} 

的WebPack使用babel-loader和babel-preset-es2015到編譯它。

您可能會在this gist中找到webpack配置，源文件和編譯文件。

我的問題是結果是不是在我的VUE應用程序「requirable」...它有一些奇怪的東西圍繞核心需要exports.install聲明。當我刪除所有這些東西，只留下exports.install = ...這是好的，否則我只是沒有得到任何東西。

我在通過import語句構建的另一個使用webpack的應用程序中使用它。

Answer 1

如果沒有output.libraryTarget選項，會的WebPack產生一束你可以通過<script>標籤，但不import包括。我認爲這是你所看到的。

如果你想import（或require）您的WebPack構建的結果，你應該設置libraryTarget到commonjs2

output: { 
    filename: 'index.js', 
    libraryTarget: "commonjs2" 
    }, 

有了這個libraryTarget配置，的WebPack輸出如下module.exports = /* ... the "weird stuff" */，所以當你進口它，你會得到你期望的導出函數。

---

如果你正在做的是編譯單個文件或設置將在其他的WebPack構建導入的文件，你可能會考慮不使用的WebPack可言的，而不是直接Babel CLI使用。在你的Gist中，除了將你的模塊封裝在一些額外的webpack引導代碼中之外，你不會從webpack獲得任何東西。