Skip to content

Commit

Permalink
Upgrade to webpack version 5
Browse files Browse the repository at this point in the history
Ran the following:

npm install webpack@latest \
            webpack-cli@latest \
            copy-webpack-plugin@latest \
            tsconfig-paths-webpack-plugin@latest \
            ts-loader@latest

Then, performed the following changes to get the build green:

- Configured webpack to emit ES5 code (`target` configuration)

  As described in [1], webpack 4 emitted ES5 code, but webpack 5 emits
  ES6 code by default. It’s not super clear to me which version of ES
  we’re actually aiming to emit, since CONTRIBUTING.md, webpack.config.js,
  and a comment in Gruntfile.js suggest we’re aiming for ES3. I think
  these might just be outdated comments, though, since f2014f7 ("Update to
  ES5") and [2] ("Now we no longer advertise support for IE8 (or ES3)")
  suggest that we’ve dropped ES3 support.

  Anyway, here I’ve configured webpack to emit ES5 code, to match the
  webpack 4 behaviour and to keep `npm run check-closure-compiler`
  passing.

- Removed config of Node-like polyfills (`node` configuration removed or
  replaced with `resolve.fallback`)

  As described in [3], webpack no longer automatically applies polyfills
  for Node.js APIs when targeting frontend environments. If you wish to
  apply polyfills, you need to opt-in though the the new
  `resolve.fallback` config.

  This means that we can remove the config telling it not to polyfill
  `Buffer`. As for the current behaviour of stubbing the Crypto module
  with an empty object, we achieve this with the `resolve.fallback.crypto:
  false` syntax which, whilst not properly documented in [4] at time of
  writing, is instructed by [5] ("If you are using something like node.fs:
  'empty' replace it with resolve.fallback.fs: false") and described in
  an error message in the webpack code [6].

As Owen said in #1184 "As part of this work we will need to manually
test that the lib still works in react-native and web workers, since
these aren't covered by automated tests." I’ve tested this in a couple
of small example apps [7] and [8], which just check that they’re able to
import ably-js and publish / receive a message.

[1] https://webpack.js.org/blog/2020-10-10-webpack-5-release/#improved-code-generation
[2] #839
[3] https://webpack.js.org/blog/2020-10-10-webpack-5-release/#automatic-nodejs-polyfills-removed
[4] https://webpack.js.org/configuration/resolve/#resolvefallback
[5] https://webpack.js.org/migrate/5/#clean-up-configuration
[6] https://github.com/webpack/webpack/blob/770a5a9cae8e2eddd5ca015efd06847e37480f45/lib/ModuleNotFoundError.js#L70-L72
[7] https://github.com/ably-labs/ably-js-react-native-example, commit 48eee78
[8] https://github.com/ably-labs/ably-js-web-worker-example, commit 88ccaae
  • Loading branch information
lawrence-forooghian committed Apr 20, 2023
1 parent 1ad4b2c commit 576299e
Show file tree
Hide file tree
Showing 3 changed files with 1,316 additions and 6,546 deletions.
Loading

0 comments on commit 576299e

Please sign in to comment.