如何将ES6模块函数正确导出为供Node.js应用使用的库？

Got it, let's break down why your unbundled Node app can't access the ssrbundle export from your Webpack-generated ssr-bundle.js, and how to fix it without bundling your Node app.

The Root Problem #

Webpack defaults to targeting browser environments, which uses a different module system than Node.js (which relies on CommonJS). Your current config outputs a bundle that works for browsers, but Node can't properly resolve the exported ssrbundle variable. When you bundle your Node app alongside it, Webpack handles the module resolution internally—so that's why that works, but it's not what you want.

Step-by-Step Fixes for Your Webpack Config #

Here's how to adjust webpack.config.js to output a bundle compatible with Node's CommonJS system:

1. Set target: 'node' #

Tell Webpack to optimize the bundle for Node.js instead of browsers. This preserves Node-specific modules and avoids browser-specific globals.

2. Use libraryTarget: 'commonjs2' #

Your current library: 'ssrbundle' sets a global variable for browsers, but Node needs exports via module.exports. Setting libraryTarget: 'commonjs2' ensures your bundle exposes the render function through Node's module system.

3. Replace style-loader with a Node-compatible CSS loader #

style-loader injects styles into the browser's DOM, which doesn't exist in Node. Use css-loader/locals instead to process CSS for SSR (it exports class names without trying to inject styles).

Modified Webpack Config #

var path = require('path');
module.exports = {
  entry: {
    ssr: './src/Html.js',
    // frontend: './src/frontend-Html.js'
  },
  target: 'node', // Add this line
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'ssr-bundle.js',
    library: 'ssrbundle',
    libraryTarget: 'commonjs2' // Add this line
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['env','react'],
          plugins: ["transform-es2015-destructuring", "transform-object-rest-spread"]
        }
      },
      {
        test:/\.css$/,
        use:['css-loader/locals'] // Replace style-loader with css-loader/locals
      }
    ]
  },
  stats: { colors: true },
  devtool: 'source-map'
};

Verify Your Node App #

Your existing Node code should work as-is now, but you can simplify it even further:

// Original code (still works)
const Html = require('./build/ssr-bundle.js');
let result = Html.ssrbundle.render();
console.log(result);

// Simplified version (thanks to commonjs2)
const { render } = require('./build/ssr-bundle.js');
let result = render();
console.log(result);

Why This Works #

• target: 'node' makes Webpack respect Node's module resolution and avoid browser-specific code.
• libraryTarget: 'commonjs2' ensures your exported object is attached to module.exports, which Node's require can read directly.
• css-loader/locals processes CSS without trying to inject it into a DOM, which is safe for SSR in Node.

Re-run your Webpack build, then start your Node app—you should now see the rendered React string in your console.

内容的提问来源于stack exchange，提问作者ioannis.th