ts-odd icon indicating copy to clipboard operation
ts-odd copied to clipboard

📝 TRACKING: Webnative Build Tool and Bundler Support

Open bgins opened this issue 4 years ago • 0 comments

This issue tracks webnative compatibility with build tools, bundlers, and frameworks. It should be treated as a living document and a reference point for developers using webnative.

Comment on this issue if you are using a build tool, bundler, or framework that isn't listed here. In particular, let us know:

  • Can you use webnative in local development mode?
  • Can you build your application?

If you are unable to do the above, please open a separate issue with a reproduction and reference it here. The complexity of reproduction will depend on the tool, but in most cases this will be an example repository that we can quickly assess.

Reproductions should follow the spirit of a Short, Self Contained, Correct (Compilable), Example. Some of these guidelines do not translate directly. For example, the example might not actually compile, but setup and instructions for how to build should be included. In general, we are looking for a short example that demonstrates local development, build, or bundling issues with the latest version of webnative.


Last updated to reflect build tool and bundler support in webnative 0.34.1.


Build tools and bundlers

Vite

[x] Local Development [x] Build

Examples

  • React TodoMVC: https://github.com/fission-suite/react-todomvc/tree/vite
  • Webnative Bundler Test: https://github.com/fission-suite/webnative-bundler-test

Issues

Requires the NPM events package to be installed as a dev dependency.

Parcel 2

[ ] Local Development [ ] Build

Issues

Not currently supported because Parcel does not support exports map. See https://github.com/parcel-bundler/parcel/issues/4155 for more details.

Webpack 5

[x] Local Development [x] Build

Examples

  • React TodoMVC: https://github.com/fission-suite/react-todomvc/tree/webpack
  • Webnative Bundler Test: https://github.com/fission-suite/webnative-bundler-test

Issues

The build may have trouble when using the default minifier terser.

An alternative tool such as esbuild can be used for minification. You can reconfigure the terser (https://webpack.js.org/plugins/terser-webpack-plugin/#terseroptions) to not minimize

module.exports = {
  optimization: { minimize: false }
}

Estrella (esbuild)

[ ] Local Development [x] Build

Examples

  • Webnative Bundler Test: https://github.com/fission-suite/webnative-bundler-test

Issues

None known.

Frameworks

Create React App 5

[x] Local Development [x] Build

Examples

  • React TodoMVC: https://github.com/fission-suite/react-todomvc

Issues

None known.

bgins avatar Sep 30 '21 17:09 bgins