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

user_123110 0
Viewed 3095

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?

rollup monorepo nrwl-nx webpack typescript
1 Answers

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.

user_1231100
Related