9

I need to build a single js that can be used as Service Worker.

I have a nrwl workspace with two @nrwl/web:lib packages, one is common and the other is worker. The worker package uses common through import { stuff } from @my/common.

With library project type rollup is used, however, the worker.umd.js doesn't contain the common dependency, so I need both common.umd.js and worker.umd.js and have to manually concat them before use as Service Worker.

With application project type webpack is used which bundles the common dependency as well, but also generates other js files, such as vendor.js, polyfills.js etc. For this, I used @nrwl/angular because with @nrwl/web:application can't be made publishable.

Is there a better approach? Should I use some other nrwl plugin for this? I'd like to avoid angular, react if possible, but will use it if need be. Or should I just customize rollup or webpack config somehow? Or create my own plugin?

František Žiačik
  • 7,511
  • 1
  • 34
  • 59

1 Answers1

10

Ok, so at last, I've come out with this solution.

I used a @nrwl/web:application plugin so that I get a webpack build.

To get rid of multiple js files, I customized the configurations like this:

In workspace.json ("worker" is my project):

  • added "vendorChunk": false to get rid of vendor chunk,
  • removed "polyfills": ... to remove polyfills chunk,
  • removed "styles" as I didn't need those,
  • added "webpackConfig": ... to provide custom webpack config.

This is the relevant part of 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": []
        },
...

Added the custom webpack.config.js to the worker project root dir:

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

This is to remove the runtime chunk. I had to do it this way because the @nrwl/web plugin doesn't have a runtimeChunk option.

All the code from the removed chunks will be included in the main chunk.

That's it, now everything compiles to single main.js file which I can load as a Service Worker.

Didn't try to fix publishing yet, but I'd probably just manually add a package.json and put it into the "assets" in the workspace.json.

slim
  • 40,215
  • 13
  • 94
  • 127
František Žiačik
  • 7,511
  • 1
  • 34
  • 59
  • 2
    This PR is about exposing the `runtimeChunk` option. (not merged yet though) https://github.com/nrwl/nx/pull/4457 – kriskodzi Mar 01 '21 at 09:46
  • Glad you found a way. What if I do want polyfills and styles? – slim Jun 21 '21 at 09:35
  • 2
    confirmed - with the latest `nx` you don't need a custom `webpack.config.js` - you can just put `"runtimeChunk": false` in `workspace.json` – slim Jun 22 '21 at 08:08
  • 1
    I'm on NRWL 14 and `runtimeChunk` still didn't work for me, only the custom webpack config did... – Dániel Kis-Nagy Apr 29 '22 at 09:25