Webpack 将 ES6 编译成模块答案

【问题标题】：Webpack compiling ES6 into moduleWebpack 将 ES6 编译成模块
【发布时间】：2016-12-31 13:36:57
【问题描述】：

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

旁注：这是一个 VueJS 的插件

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

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

Webpack 使用babel-loader 和babel-preset-es2015 来编译它。

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

我的问题是我的 Vue 应用程序中的结果不是“必需的”......它在核心需要 exports.install 声明中有一些奇怪的东西。当我删除所有这些东西并只留下exports.install = ... 时，没关系，否则我就什么也得不到。

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

【问题讨论】：

【解决方案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 获得任何东西。

【讨论】：