Nrwl / Nx - 如何構建由瀏覽器使用的單個 js 文件，並捆綁了依賴項

Question

我需要構建一個可以用作Service Worker的js 。

我有一個帶有兩個@nrwl/web:lib包的 nrwl 工作區，一個是common的，另一個是worker 。 worker package 通過import { stuff } from @my/common 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 （“工人”是我的項目）：

• 添加了"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 。