Guide
Tutorials
Configure
API
Community
Guide
Tutorials
Configure
API
Community

Browser Compatibility

Browserslist Configuration

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

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

.browserslistrc
chrome >= 51
edge >= 15
firefox >= 54
safari >= 10
ios_saf >= 10
TIP

Please refer to Modern.js Builder - Browserslist for more information.

Browserslist

Modern.js supports the browserslist field in the package.json file, or a .browserslistrc file to specify the target browser range covered by the project.

This value is used by ['@babel/preset-env'] (https://babeljs.io/docs/en/babel-preset-env) and ['autoprefixer'] (https://github.com/postcss/autoprefixer) to determine the JavaScript syntax features to be converted and the CSS browser prefix to be added.

The default value in Modern.js as follow:

['> 0.01%', 'not dead', 'not op_mini all'];

You can learn how to customize the browserslist here.

See Modern.js Builder docs to learn more Browserslist info.

NOTE

Modern.js also supports configuring output.override Browserslist to override the default browserslist value.

Polyfill

Polyfill At Compile

Modern.js inject the Polyfill code via [core-js] (https://github.com/zloirock/core-js) at compile time by default.

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.

INFO

For case where Polyfill is not required for third-party dependencies, you can set 'output.polyfill' to usage, so that Babel compiles only Polyfill code based on the syntax used in the code.

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:

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 product contains the following script:

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

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

ua-polyfill

CAUTION

This feature only works when using Modern.js built-in Web Server.

If you need to customize the HTML template, please refer to HTML Template. Manually modifying the template through html.template / tools.html will cause this feature not work.