Webpack 输出文件具有默认导出而不是 module.exports

Question

我有一个情况，我需要 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 看起来像这样：

module.exports = function() {
  return 'hello world';
}

我需要 webpack 做的是导出而export default不是module.exports =.

Answer 1

您可以使用转译器（如 Babel）来允许您使用运行时环境不支持的语言功能（如import语法export）。您可以使用以下命令安装所需的模块

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

这将安装 Babel 核心（一个用于转译未来语言功能的插件）以及用于使用 Babel 预处理 JS 文件的 webpack 加载器。

然后，您的根项目目录中需要一个.babelrc配置文件。在这种情况下，它只需要包含以下内容

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

这告诉 Babel 你想使用“预设环境”。除其他外，用于转译您的import和语句的插件。export

最后，你需要告诉Webpack使用Babel来加载JS文件。您可以通过module.rules向 Webpack 配置中添加一个列表来完成此操作，如下所示。

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