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核心，一个可转换未来语言功能的插件以及webpack加载程序，以使用Babel预处理JS文件。

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

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

这告诉Babel您要使用“预设环境”。插件，可翻译您的import和export语句。

最后，您需要告诉Webpack使用Babel加载JS文件。您可以通过向Webpack配置中添加一个module.rules列表来实现此目的。

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

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

1 个答案: