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 满足您的要求的情况下，第一种方法可能更好。