typescript - Nrwl/Nx - 如何构建单个 js 文件可由浏览器使用并捆绑依赖项

Question

我需要建一个js可以用作 服务 worker .
我有一个 nrwl 工作区，其中有两个 @nrwl/web:lib包，一个是common另一个是 worker . worker包用途common通过 import { stuff } from @my/common .
与 library项目类型rollup然而，使用的是 worker.umd.js不包含 common依赖，所以我需要两个 common.umd.js和 worker.umd.js并且必须在用作 Service Worker 之前手动连接它们。
与 application项目类型webpack用于捆绑 common依赖也是如此，但也会生成其他js文件，比如vendor.js , polyfills.js等等。为此，我使用了 @nrwl/angular因为与 @nrwl/web:application无法发布。
有没有更好的方法？我应该为此使用其他一些 nrwl 插件吗？我想避免 angular , react如果可能，但会在需要时使用它。或者我应该自定义 rollup或 webpack以某种方式配置？或者创建我自己的插件？

Answer 1

好的，最后，我提出了这个解决方案。
我用了 @nrwl/web:application插件，以便我获得 webpack 构建。
为了摆脱多个js文件，我自定义了这样的配置:
在 workspace.json (“ worker ”是我的项目):

已添加 "vendorChunk": false摆脱 vendor 块，

已移除 "polyfills": ...删除 polyfills 块，

已移除 "styles"因为我不需要那些，

已添加 "webpackConfig": ...提供自定义的 webpack 配置。

这是 workspace.json的相关部分.

"worker": {
    "root": "packages/worker",
    "sourceRoot": "packages/worker/src",
    "projectType": "application",
    "architect": {
    "build": {
        "builder": "@nrwl/web:build",
        "outputs": ["{options.outputPath}"],
        "options": {
            "vendorChunk": false,
            "outputPath": "dist/packages/worker",
            "index": "packages/worker/src/index.html",
            "main": "packages/worker/src/main.ts",
            "tsConfig": "packages/worker/tsconfig.app.json",
            "webpackConfig": "packages/worker/webpack.config.js",
            "scripts": []
        },
...

添加自定义 webpack.config.js到 worker项目根目录:

module.exports = function (baseConfig) {
    baseConfig.optimization.runtimeChunk = false;
    return baseConfig;
};

这是为了删除运行时块。我必须这样做，因为 @nrwl/web插件没有 runtimeChunk选项。
删除块中的所有代码都将包含在主块中。
就是这样，现在一切都编译为单个 main.js我可以作为 Service Worker 加载的文件。
还没有尝试修复发布，但我可能只是手动添加一个 package.json并将其放入 "assets"在 workspace.json .