在 NodeJS 中执行 webpack 编译的 bundle

Question

我想为我的 ReactJS 应用程序实现服务器端渲染。我使用 react-router。我将 routes.js 作为 webpack 入口点并使用 output.libraryTarget = "commonjs2" 选项进行编译。然后我需要在 NodeJS 脚本中编译的结果来进行渲染。但我有错误。 Webpack 在以下代码中包装模块：

/* 277 */
/***/ function(module, exports, __webpack_require__) {

    /* WEBPACK VAR INJECTION */(function(Buffer, global) {
    if (global.foo) {
        /* ... */
    }
    /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(277).Buffer, (function() { return this; }())))

 /***/ }

当 NodeJS 尝试执行 (function() { return this; }()) 它的 return undefined 时。在浏览器中它将 return window。为什么 webpack 使用这样的包装代码？如何使这段代码在 NodeJS 中工作？

我使用 node-clone as external lib. It don't use any other libs as dependency. But webpack in its bundle makes buffer 作为这个库的依赖项。在 buffer 代码中我遇到了错误 Cannot read property 'TYPED_ARRAY_SUPPORT' of undefined。发生这种情况是因为在 nodeJS (function() { return this; }()) return undefined.

Answer 1

默认情况下，webpack 会为浏览器打包东西。如果你想用 webpack 构建 Node 库，你需要在你的配置中指定一个 target:

module.exports = {
  // ...

  target: 'node',
};

在 NodeJS 中执行 webpack 编译的 bundle

Execute webpack compiled bundle in NodeJS

node.js

reactjs

webpack

server-side-rendering