Webpack 无法识别 Node 的进程模块答案

【问题标题】：Webpack not recognizing Node's process moduleWebpack 无法识别 Node 的进程模块
【发布时间】：2018-07-28 23:31:25
【问题描述】：

在十多年没有接触 Javascript 之后，我想到了一个应用程序，该应用程序在实现为 NodeJS 应用程序时效果最佳。我阅读了现代 JS 生态系统，和大多数人一样，我完全糊涂了，哈哈。

似乎 NodeJS、TypeScript 和 Webpack 的组合是一个不错的选择，但我什至无法让一个简单的 Hello World 工作。

我写的一个 TypeScript 文件，./src/run_task.ts：

// #!/usr/bin/env node
/**
 * @file Main application file. Users start the app by running `node dist/run_task.js`
 * @author Gerard Leenhouts
 */

import * as process from "process";

function main(): number {
    console.log(process);
    console.log(`Got ${process.argv.length} arguments.`);
    return 42;
}

main();

当我手动执行 tsc (tsc -p server.tsconfig.json) 时，它工作正常，但是当我执行 webpack 时，它似乎在生成的 .js 文件中创建了自己的 process 模块定义。这是其中的一部分：

process.nextTick = function (fun) {
    var args = new Array(arguments.length - 1);
    if (arguments.length > 1) {
        for (var i = 1; i < arguments.length; i++) {
            args[i - 1] = arguments[i];
        }
    }
    queue.push(new Item(fun, args));
    if (queue.length === 1 && !draining) {
        runTimeout(drainQueue);
    }
};

// v8 likes predictible objects
function Item(fun, array) {
    this.fun = fun;
    this.array = array;
}
Item.prototype.run = function () {
    this.fun.apply(null, this.array);
};
process.title = 'browser';
process.browser = true;
process.env = {};
process.argv = [];
process.version = ''; // empty string to avoid regexp issues
process.versions = {};

function noop() {}

process.on = noop;
process.addListener = noop;
process.once = noop;
process.off = noop;
process.removeListener = noop;
process.removeAllListeners = noop;
process.emit = noop;
process.prependListener = noop;
process.prependOnceListener = noop;

process.listeners = function (name) { return [] }

process.binding = function (name) {
    throw new Error('process.binding is not supported');
};

process.cwd = function () { return '/' };
process.chdir = function (dir) {
    throw new Error('process.chdir is not supported');
};
process.umask = function() { return 0; };

我的package.json：

{
  "name": "startpage",
  "version": "1.0.0",
  "description": "Self hosted web app to function as a web browser startpage",
  "main": "run_task.js",
  "scripts": {
    "build": "webpack",
    "start": "node dist/run_task.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Gerard Leenhouts",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^9.4.6",
    "ts-loader": "^3.5.0",
    "typescript": "^2.7.2",
    "webpack": "^3.11.0"
  }
}

我的webpack.config.js：

const path = require('path');

module.exports = [
    {
        // devtool: 'inline-source-map',
        entry: './src/run_task.ts',
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    use: [
                        {
                            loader: 'ts-loader',
                            options: { configFile: 'server.tsconfig.json' }
                        }
                    ],
                    exclude: /node_modules/
                }
            ]
        },
        resolve: {
            extensions: [ '.ts', '.tsx', '.js' ]
        },
        output: {
            filename: 'run_task.js',
            path: path.resolve(__dirname, 'dist')
        }
    }
];

我的server.tsconfig.json：

{
    "compilerOptions": {
        // "sourceMap": true,
        "outDir": "./dist/",
        "strict": true,
        "noImplicitAny": true,
        "target": "es6",
        "module": "commonjs",
        "moduleResolution": "node",
        "esModuleInterop": true,
        "baseUrl": "./",
        "paths": { "*": ["node_modules/*", "src/types/*"] },
        "removeComments": true
    },
    "include": [ "./src/**/*" ]
}

我已经阅读 Webpack 和 TypeScript 文档几个小时了，但似乎无法弄清楚。我很可能忽略了一些简单的事情，但我再也看不到森林了。显然它与模块解析有关，但据我所知，配置文件中的一切似乎都很好。任何帮助表示赞赏，在此先感谢！

【问题讨论】：

标签： node.js typescript webpack

【解决方案1】：

它似乎在生成的 .js 文件

在您的webpack.config.js 中，您需要将target 设置为node。只需在与output 相同的级别添加target: 'node'。这将编译以在类似 Node.js 的环境中使用（使用 Node.js 需要加载块并且不触及任何内置模块，如 process、fs 等）。文档在这里：https://webpack.js.org/concepts/targets/

【讨论】：