Webpack 捆绑但不解析 node_modules 包中的打字稿答案

【问题标题】：Webpack bundling but not resolving typescript from node_modules packageWebpack 捆绑但不解析 node_modules 包中的打字稿
【发布时间】：2020-06-16 04:29:44
【问题描述】：

各位，我已经尝试了所有我能想到的不同方法来解决这个问题。

我们在临时 mono-repo 中有两个文件夹（没有 yarn 工作区）。一种称为Mgt-Shared，一种称为Server。我们从服务器package.json 与"mgt-shared": "file:../mgt-shared" 引用共享，我运行一个简单的npm install 以将我们的共享共享到服务器node_modules。这两个项目都是混合打字稿和 javascript。当我运行 webpack 尝试捆绑服务器时，它工作正常，来自 shared 的 Typescript 文件显示在捆绑列表中，但是当我运行 node dist/app.bundle.js - 它无法解析某些模块（特别是所有 typescript 的） . 当我运行webpack --json 时，我发现了这个（看起来它正在正确解析）：

    {
      "id": "mgt-shared/discounts/discount_reasons",
      "identifier": "external \"mgt-shared/discounts/discount_reasons\"",
      "name": "external \"mgt-shared/discounts/discount_reasons\"",
      "index": 23,
      "index2": 15,
      "size": 42,
      "built": true,
      "optional": false,
      "prefetched": false,
      "chunks": [
        "main"
      ],
    ...
      "failed": false,
      "errors": 0,
      "warnings": 0,
      "assets": [],
      "reasons": [
        {
          "moduleId": "./src/discounts/discount.ts",
          "moduleIdentifier": "/home/mygastank/WebstormProjects/mygastank/server/node_modules/babel-loader/lib/index.js!/home/mygastank/WebstormProjects/mygastank/server/src/discounts/discount.ts",
          "module": "./src/discounts/discount.ts",
          "moduleName": "./src/discounts/discount.ts",
          "type": "cjs require",
          "userRequest": "mgt-shared/discounts/discount_reasons",
          "loc": "20:24-72"
        },
        {...
      ],
      "providedExports": null,
      "optimizationBailout": [],
      "depth": 6
    },

我的 webpack 配置是这样的：

const nodeExternals = require('webpack-node-externals')
module.exports = {
  mode: 'development',
  target: 'node',
  // This forces resolution of native node modules
  externals: [nodeExternals({ modulesFromFile: true })],
  entry: './src/index',
  output: {
    filename: 'app.bundle.js'
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json'],
  },
  module: {
    rules: [
      {
      // Include ts, tsx, js, and jsx files.
      test: /\.(ts|js)?$/,
      loader: 'babel-loader',
      include: [/node_modules\/mgt-shared/],
      exclude: [/node_modules/],
      options: {
        presets: [
          [
            'env',
            {
              'targets': {
                'node': 'current'
              }
            }
          ],
          ['@babel/preset-typescript',
            { 'allExtensions': true, 'isTSX': true }]
        ]
      }
    }]
  }
}

【问题讨论】：

我的猜测是：modulesFromFile 选项告诉 webpack 不要捆绑它在你的 package.json 中找到的任何依赖项。因此，您的 mgt-shared 不会被 webpack 处理，而是保留为 require('mgt-shared')。由于这是一个打字稿模块，节点随后无法要求它。（对于需要被转换以被当前节点版本理解的任何其他模块也是如此）
嘿 MarcRo 我想就是这样。我将该包添加到白名单中，现在它似乎已经过去了（或打破了其他东西）。现在我们的文件在目录中出现问题，但在 src 中没有。
您需要更具体地了解新问题。-) 错误输出可能会有所帮助。也不清楚你的意思是什么目录。

标签： node.js typescript webpack webpack-4

【解决方案1】：

我发现有办法将其他目录列入白名单。

我需要将whitelist 键添加到nodeExternals 的选项中，如下所示：

  externals: [nodeExternals({
    whitelist: [/mgt-shared/],
    modulesFromFile: true
  })],

其他一切都可以保持不变。

【讨论】：