代码之家 › 专栏 › 技术社区 › anthony sottile

在使用`target:node时,如何说服webpack使用节点导入而不是web导入`

webpack node.js javascript

anthony sottile · 技术社区 · 5 年前

索引.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"
  }
}

build命令

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

不使用网页包运行

$ node index.js
hello world

创建网页包后运行

$ 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 在这里导入并运行,下面是最后两个帧中的一些相关代码:

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

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

node_模块/通用用户代理/dist web/索引.js

dist-web navigator.userAgent node 一个人做别的事。

我目前糟糕的解决方法

我实际上并不关心用户代理,所以我现在 在这附近闲逛 有:

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

是的,跑步 sed 以消除访问 navigator

如何说服webpack选择 dist-node 分布式网络 require(...) 好像在跑步的时候 节点

0 回复 | 直到 5 年前

Christos Lytras 5 年前

这是一个众所周知的问题 @octokit/rest : https://github.com/octokit/rest.js/issues/1485

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

似乎有一个永久的修复,但还没有发布。在此之前,您可以尝试两种方法来解决 dist-node universal-user-agent 使用 Webpack Resolve :

`alias` 解决 `距离节点`

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'),
  },
};

node_modules 你迟早会遇到麻烦的。

网页包问题

这里似乎有一个问题,并且对这个问题进行了长时间的讨论: https://github.com/webpack/webpack/issues/5756