Browser Compatibility#

Browserslist Configuration#

Modern.js supports setting the browserslist for your web applications. You can set the value of Browserslist in the .browserslistrc file.

When you create a new Modern.js project, it will includes a .browserslistrc configuration by default, which means that the JavaScript code will be compiled to ES6.

chrome >= 51
edge >= 15
firefox >= 54
safari >= 10
ios_saf >= 10

Polyfill#

Polyfill At Compile#

Modern.js defaults to importing corresponding polyfill code from [core-js] (https://github.com/zloirock/core-js) during compilation.

By default, the required Polyfill code will be introduced according to the settings of the Browserslist, so there is no need to worry about the Polyfill problem of the project source code and third-party dependencies, but because it contains some Polyfill code that is not used, the final bundle size may be increased.

Polyfill At Runtime#

Modern.js also provides a runtime Polyfill solution based on browser UA information, which has the following advantages over Babel:

• It will not be inserted into the code, reducing the code .
• The same browser will share a Polyfill code. Therefore, with more and more projects, the UA-based Polyfill code will be delivered faster and faster.

exec pnpm run new to enable this features:

? Please select the operation you want: Enable features
? Please select the feature name: Enable UA-based Polyfill Feature

After executing the command, register the Polyfill plugin in modern.config.ts:

import { polyfillPlugin } from '@modern-js/plugin-polyfill';

export default defineConfig({
  plugins: [..., polyfillPlugin()],
});

After configuring output.polyfill as ua and executing pnpm run build & & pnpm run serve to start the server, visiting the page can see that the HTML artifacts contains the following script:

<script src="/__polyfill__" crossorigin></script>

Visit the page http://localhost:8080/__polyfill__ on Chrome 51 to see: