javascript - 使用 `target: node` 时如何说服 webpack 使用 Node 导入而不是 web 导入

Question

首先是代码，这是一个非常愚蠢的示例，但它是从更复杂的 github 操作中提取的:

index.js

require('@octokit/rest');
console.log('hello world');

webpack.config.js

const path = require('path');

module.exports = {
  target: 'node',
  entry: './index.js',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

包.json

{
  "private": true,
  "devDependencies": {
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10"
  },
  "dependencies": {
    "@octokit/rest": "^16.35.0"
  }
}

构建命令

node_modules/.bin/webpack --config webpack.config.js

不使用 webpack 运行

$ node index.js
hello world

构建 webpack 后运行

$ node dist/index.js 
/tmp/x/dist/index.js:1
...

ReferenceError: navigator is not defined
    at Module.i (/tmp/x/dist/index.js:1:3659)
    at Object.<anonymous> (/tmp/x/dist/index.js:15:6701)
    at t (/tmp/x/dist/index.js:1:110)
    at Object.<anonymous> (/tmp/x/dist/index.js:15:874)
    at t (/tmp/x/dist/index.js:1:110)
    at Object.<anonymous> (/tmp/x/dist/index.js:15:697)
    at t (/tmp/x/dist/index.js:1:110)
    at Object.<anonymous> (/tmp/x/dist/index.js:1:3891)
    at t (/tmp/x/dist/index.js:1:110)
    at Object.<anonymous> (/tmp/x/dist/index.js:15:418)

分析

根据我的发现， node_modules 内有一个已编译的 typescript 包正在导入并在此处运行，这是最后两帧中的一些相关代码:

node_modules/@octokit/endpoint/dist-src/defaults.js

// ...
import { getUserAgent } from "universal-user-agent";
// ...
const userAgent = `octokit-endpoint.js/${VERSION} ${getUserAgent()}`;
// ...

universal-user-agent在以下文件中提供了其代码的几种实现:

node_modules/universal-user-agent/dist-node/index.js

node_modules/universal-user-agent/dist-web/index.js

如您所料， dist-web实现使用 navigator.userAgent -- node一个人做别的事情。

我目前糟糕的解决方法

我实际上并不关心用户代理，所以我目前正在解决这个问题:

sed -i 's/\bnavigator\b/({})/g' dist/index.js

是的，正在运行 sed消除对 navigator 的访问

tl;博士

如何说服 webpack 选择 dist-node在 dist-web 上实现一个(像 require(...) 似乎在直接运行 node 时会这样做)？

Answer 1

这是 @octokit/rest 的已知问题: https://github.com/octokit/rest.js/issues/1485

这个universal-user-agent 里面也有很长的讨论问题:https://github.com/gr2m/universal-user-agent/issues/23

似乎有一个永久修复，但尚未发布。在此之前，您可以尝试 2 件事来解决 dist-node的 universal-user-agent使用 Webpack Resolve :

1) 使用alias解决dist-node

const path = require('path');

module.exports = {
  target: 'node',
  resolve: {
    alias: {
      'universal-user-agent': path.resolve(__dirname, 'node_modules/universal-user-agent/dist-node/index.js')
    }
  },
  entry: './index.js',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

2) 使用 mainFields

module.exports = {
  target: 'node',
  resolve: {
    mainFields: ['main', 'module']
  },
  entry: './index.js',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

您应该使用第一种方法，因为第二种方法反射(reflect)了所有 node_modules你迟早会遇到问题。

Webpack 问题

这里似乎有一个问题和关于这个问题的长时间讨论: https://github.com/webpack/webpack/issues/5756