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

Question

我需要构建一个 js 可以用作 Service Worker。

我有一个包含两个 @nrwl/web:lib 包的 nrwl 工作区，一个是 common，另一个是 worker。 worker 包使用 common 到 import { stuff } from @my/common.

使用 library 项目类型 rollup，但是，worker.umd.js 不包含 common 依赖项，所以我需要两个 common.umd.js和 worker.umd.js 并且必须在用作 Service Worker 之前手动连接它们。

With 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 以摆脱供应商块，
删除了 "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 并将其放入 workspace.json 中的 "assets"。

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

Nrwl / Nx - how to build single js file consumable by browser with dependencies bundled

rollup

typescript

webpack

monorepo

nrwl-nx