Question

我正在尝试使用Webpack将ES6编译为文件，但无法弄清楚为什么代码不可用。

旁注：这是VueJS的插件

我从一个导出单个函数的简单文件开始，例如

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

Webpack使用babel-loader和babel-preset-es2015进行编译。

您可以在this gist中找到webpack配置，源代码和已编译文件。

我的问题是我的Vue应用程序中的结果不是“requirable”...它有一些奇怪的东西围绕核心需要exports.install语句。当我删除所有这些东西并且只留下exports.install = ...时就可以了，否则我就是没有得到任何东西。

我在另一个使用webpack构建的应用程序中使用它，通过import语句。

Answer 1

如果没有output.libraryTarget选项，webpack会生成一个包，您可以通过<script>标记但不包括import 来添加。我认为这就是你所看到的。

如果您希望import（或require）构建网站包的结果，则应将libraryTarget设置为commonjs2

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

使用此libraryTarget配置，webpack输出看起来像module.exports = /* ... the "weird stuff" */，因此当您导入它时，您将获得您期望的导出功能。

如果你所做的只是编译将在另一个webpack版本中导入的单个文件或一组文件，你可能会考虑根本不使用webpack，而是直接使用Babel CLI。在你的Gist中，除了将模块包装在一些额外的webpack引导代码中之外，你没有从webpack获得任何东西。