This article will introduce H5 development related content, including compatibility, considerations, etc.
By default, the
@babel/preset-env is configured as follows
If you need to be compatible with lower versions of the system, change the configuration of
babel.config.js in the project root directory. (The parameters exposed by
babel-preset-taro are not documented at the moment, please refer to source for detailed configuration, welcome to contribute documentation ~)
To improve compilation speed, Taro sets the
external attribute to
babel-loader. Dependencies in
node_modules (except for those named with
taro) are not compiled by babel. See Github for the
Therefore the following issues need to be noted.
@tarojs/componentsis not compiled by Babel by default, but ES5 packages were not compiled before
3.2.10, please update to
- Dependencies in
node_modulesare not compiled by default, if you have compatibility needs, please modify the
babel-loadermanually using WebpackChain.
Android 4.4 compatible Please make sure you have done the following.
- Taro is using
- Use the compatibility component library (only React is supported for now).
- Properly configure
- If you still have problems with
Promise undefined, you can manually introduce a Promise polyfill in
Taro 3.2.4 started to support
Taro3 H5-side component library is based on
Web Components and was developed using the Stencil framework.
Stencil Compatibility Status
However, there are still some problems with mobile support for
Web Components, the main issues are as follows.
- Android 4.4 white screen
- Multi-line text truncation failure
- Some Android machines (OPPO, VIVO mostly), the style
visibilityswitch fails to cause the page white screen
Therefore, developers with strong compatibility requirements can use the React Compatibility Component Library instead of the default
Web Components component library. It is completely based on React and has good compatibility, but currently only a few commonly used components have been adapted, so developers should choose carefully to use it.
- Installing the Compatibility Component Library
- Set the compilation configuration
- Start Compile
Due to manpower issues, the Taro team is still focusing on the
Web Components component library for iteration. Developers are also welcome to add to the React-compatible component library by converting components developed in
Stencil syntax to React syntax (Stencil supports JSX, so it's not a lot of work). See the development process at @tarojs/component-react
Some issues to keep in mind when developing H5 with React.
React has the fast refresh feature enabled by default in H5 Dev compile mode.
However, when custom environment variable is used, the following error is reported.
Webpack devServer is configured to turn off hot updates:
hot: false, the following error will be reported.
Uncaught ReferenceError: $RefreshSig$ is not defined
This is all because in dev environments, Taro does two things by default.
- Use the Babel plugin with
devServer.hotin the Webpack configuration to true will add the
fast refresh Babel plugin and the loader must be enabled or disabled at the same time.
So when you get the above error, or if you don't want to enable
fast refresh, you can disable it by configuring both Babel and Webpack.