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获得任何东西。