Javascript 将输出文件打包为默认导出，而不是module.exports

我有一个案例，我需要webpack使用

export

语法创建文件，而不是

module.exports

。这可能吗

这是我的配置：

const path = require('path');

module.exports = {
  mode: "production",
  entry: "./node/example.js",
  node: {
    console: true,
    global: true,
    process: true,
    __filename: true,
    __dirname: true,
    Buffer: true,
    setImmediate: true,
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'example.js',
    libraryTarget: 'commonjs-module'
  },
  resolve: {
    // options for resolving module requests
    // (does not apply to resolving to loaders)
    modules: [
      "node_modules",
      path.resolve(__dirname, "app")
    ],
    // directories where to look for modules
    extensions: [".js", ".ts", ".jsx", ".css"],
  },

  target: "node", // enum  // the environment in which the bundle should run

}

example.js如下所示：

我需要webpack做的是使用

export default

导出，而不是

module.exports=

您可以使用transpiler（如Babel）来允许您使用运行时环境不支持的语言功能（如

import

和

export

语法）。您可以使用安装所需的模块

npm i @babel/core @babel/preset-env babel-loader

这将安装Babel core，一个可以传输未来语言功能的插件，以及一个用Babel预处理JS文件的网页包加载器

然后，在根项目目录中需要一个

.babelrc

配置文件。在这种情况下，它只需要包含以下内容

{"presets": ["@babel/preset-env"]}

这就告诉巴贝尔你想使用“预设环境”插件来传输你的

import

和

export

语句

最后，您需要告诉Webpack使用Babel加载JS文件。您可以这样做，将

模块.rules

列表添加到您的网页配置中

node: { /* ... */ },
module: {
    rules: [
        {test: /\.js$/, use: 'babel-loader'}
    ]
}

---

我认为你在这个解释上跳了枪，这个解释解释了如何加载文件和从babel文件构建，我没有这样做。我实际上正在加载es5文件。但是，我需要webpack导出一个使用

export

语法的包。我知道这个案子很不寻常。我在质疑webpack是否有能力做到这一点。啊，明白了，你想知道webpack对es6模块的支持。这似乎意味着它们得到了开箱即用的支持，所以我理解，您想将CommonJS代码库编译成一个最终的ESM包吗？@loganfsmyth是的。这可能吗？将Bam从“/path/to/webpack.bundle.1234.js”导入；新Bam//语法错误：星型导出项无法解析导入绑定名称“default”。

node: { /* ... */ },
module: {
    rules: [
        {test: /\.js$/, use: 'babel-loader'}
    ]
}