webpack 不在 monorepo (turborepo) 中捆綁包然后拋出“意外的令牌‘export’”

Question

編輯：可以輕松重現問題的存儲庫：

https://github.com/sebastianugug/turborepo-nestjs

我有一個 turborepo 項目，其中包含幾個共享各種包的 nestjs 應用程序。

我已根據文檔和最新版本通過 CLI 將其配置為使用 webpack。 不幸的是，它似乎沒有按預期編譯應用程序，解決了從 /packages/ 內的共享 package 中拋出的“意外令牌‘導出’”。

我的 package 管理是pnpm 。

錯誤：

graphql-server:build: SyntaxError: Unexpected token 'export'
graphql-server:build:     at Object.compileFunction (node:vm:352:18)

版本/依賴項：

  "dependencies": {
    "@nestjs/common": "9.0.8",
    "@nestjs/core": "9.0.8",
    "@nestjs/platform-express": "9.0.8",
    "@nestjs/graphql": "10.0.21",
    "@nestjs/apollo": "10.0.19",
    "graphql": "16.5.0",
    "apollo-server-express": "3.6.7",
    "reflect-metadata": "0.1.13",
    "rimraf": "3.0.2",
    "rxjs": "7.5.5"
  },
  "devDependencies": {
    "@nestjs/cli": "8.2.8",
    "@nestjs/schematics": "8.0.11",
    "@nestjs/testing": "9.0.8",
    "@types/express": "4.17.13",
    "@types/jest": "28.1.2",
    "@types/node": "16.0.0",
    "@types/supertest": "2.0.12",
    "@typescript-eslint/eslint-plugin": "5.30.0",
    "@typescript-eslint/parser": "5.30.0",
    "eslint": "8.18.0",
    "eslint-config-prettier": "8.5.0",
    "eslint-config-custom-nest": "workspace:*",
    "eslint-plugin-prettier": "4.2.1",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-unicorn": "43.0.1",
    "jest": "28.1.2",
    "prettier": "2.7.1",
    "source-map-support": "0.5.21",
    "supertest": "6.2.3",
    "ts-jest": "28.0.5",
    "ts-node": "10.8.1",
    "tsconfig-paths": "3.10.1",
    "typescript": "4.7.4",
    "webpack-node-externals": "3.0.0",
    "webpack": "5.74.0",
    "run-script-webpack-plugin": "0.1.1",
    "ts-loader": "9.3.1",
    "webpack-cli": "4.10.0",
    "@yeo/tsconfig": "workspace:*",
    "@yeo/nest-config": "workspace:*",
    "@yeo/tracer": "workspace:*",
    "@yeo/entities": "workspace:*"
  },

生產構建拋出相同的錯誤，只是將所有內容捆綁到一個 server.js 文件中。 對於 HMR，使用了文檔中的這個配置：

const nodeExternals = require("webpack-node-externals");
const { RunScriptWebpackPlugin } = require("run-script-webpack-plugin");

module.exports = function (options, webpack) {
  return {
    ...options,
    entry: ["webpack/hot/poll?100", options.entry],
    externals: [
      nodeExternals({
        allowlist: ["webpack/hot/poll?100"],
      }),
    ],
    plugins: [
      ...options.plugins,
      new webpack.HotModuleReplacementPlugin(),
      new webpack.WatchIgnorePlugin({
        paths: [/\.js$/, /\.d\.ts$/],
      }),
      new RunScriptWebpackPlugin({ name: options.output.filename, autoRestart: false }),
    ],
  };
};

應用結構：

├── apps
│   ├── nest-app1
│   └── nest-app2
└── packages
    └── config
        └── src
            └── config.module.ts

Answer 1

我可以想到兩種方法來解決這個問題。

使用 NestJS monorepo 模式。 在這里查看文檔

或者

使用 Typescript 編譯器（或類似的 tsup）將build和dev腳本添加到每個包 Package.json。 還要在 Package.json 添加main和types字段，指向編譯好的js文件。

這是一個簡單的例子，說明 Package.json 對於 shared 的 package 可能是什么樣子。 請注意，這假定存在 tsconfig.json 文件（如果不存在，請創建一個或將配置選項傳遞給 tsc）

{
  "name": "shared",
  "main": "dist/index.js",
  "types": "dist/index.js",
  "scripts": {
    "build": "tsc --build",
    "dev": "tsc --watch"
  },
  "dependencies": {
    "typescript": "^4.9.4"
  }
}

如果您需要與不使用 NestJs 的應用程序共享包和/或在 monorepo 之外共享包，則后一種方法可能更好。 在 NestJs 是唯一框架並且單個 Package.json 滿足您的要求的情況下，第一種方法可能更好。