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

问题描述

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

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

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

使用 worker.umd.js 项目类型 application 也捆绑了 webpack 依赖项，但也会生成其他 js 文件，例如 common、vendor.js等等。为此，我使用了 polyfills.js，因为 @nrwl/angular 不能发布。

有更好的方法吗？我应该为此使用其他一些 nrwl 插件吗？如果可能，我想避免使用 @nrwl/web:application、angular，但会在需要时使用它。或者我应该以某种方式自定义 react 或 rollup 配置？或者创建我自己的插件？

解决方法

好的，最后，我想出了这个解决方案。

我使用了一个 @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 并将其放入 "assets" 中的 workspace.json。