Question

十多年来，在没有触及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时，它似乎创建了自己process的定义生成的.js文件中的模块。这是其中的一部分：

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文档，似乎无法弄明白。我很有可能忽略了一些简单的东西，但我再也看不到森林里的树木了。显然它与模块分辨率有关，但据我所知，配置文件中的一切似乎都很好。感谢任何帮助，提前谢谢！

Answer 1

它似乎创建了它自己对过程模块的定义产生.js文件

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

Webpack无法识别Node的处理模块

1 个答案: