Boost Interactive Web Development with Rax: Building EVA Workstation Scaffolding

Overview

Referencing a previous article on the entertainment‑era interactive solution, the EVA Workstation aims to improve interactive development efficiency.

Integrating Interactive Business into the Rax System

Before standardization, the tech stack was fragmented and activity‑driven; aligning with the Rax ecosystem allows the team to reuse shared infrastructure and avoid duplicated effort.

Characteristics and Requirements of Interactive Business

Only the web environment is needed; no WEEX compatibility, so Rax 0.x’s sacrifices for WEEX are unnecessary.

Higher performance demands because Canvas is used for game‑like areas.

Engineering Gaps When Adopting Rax

CSS writing experience differs from standard web CSS: inline styles cannot use Autoprefix, inline style performance is poorer, and features such as vw/vh, cssnext, and custom properties for notch handling are missing.

Desire to use Rax ecosystem components while writing plain web code.

SVG icon usage and optimization.

Technical Solution

The solution combines a base Rax scaffold,

build-plugin-rax-app

, custom interactive plugins, and a CLI tool collection.

build-plugin-rax-app

Configuration disables inline styles and targets only web.

<code>{
  "inlineStyle": false,
  "plugins": [
    [
      "build-plugin-rax-app",
      {
        "targets": ["web"]
      }
    ],
    [
      "./builder/myPlugin.js",
      {
        "svgConfig": {
          "source": "./src/assets/icons"
        }
      }
    ]
  ]
}
</code>

Interactive Custom Plugin

Provides CSS Modules capability.

Includes PostCSS plugins for vw/vh, cssnext, etc.

Handles SVG icon usage and optimization.

Uses

DefinePlugin

to inject environment variables and resource versions.

Interactive Scaffold

The scaffold customizes the Rax base template to be ready out‑of‑the‑box, bundling ESLint, Stylelint, accessibility checks, commit‑message standards, and more.

Customize the Rax base scaffold for interactive needs.

Extend build scripts with interactive build plugins.

Benefits of the Scaffold

Out‑of‑the‑box demo, best‑practice configurations for EVA JS, Rax EVA, CSS/JS style guides, ESLint, Stylelint, accessibility, and commit conventions.

Provides

@alib/build-scripts

plugins for PostCSS,

scoped-css-loader

,

DefinePlugin

, and

webpack-bundle-analyzer

for bundle analysis.

HTML pages include the EVA JS game engine and Rax EVA libraries.

Integrates common solutions such as mock capabilities, bundle size analysis, and automated testing.

Scaffold Base Configuration

Example

build.json

:

<code>{
  "inlineStyle": false,
  "plugins": [
    [
      "build-plugin-rax-app",
      {
        "targets": ["web"]
      }
    ],
    [
      "./builder/myPlugin.js",
      {
        "svgConfig": {
          "source": "./src/assets/icons"
        }
      }
    ]
  ]
}
</code>

PostCSS core configuration in

./builder/myPlugin.js

:

<code>plugins: () => [
  require('postcss-preset-env')({
    autoprefixer: { flexbox: 'no-2009' },
    stage: 3,
    features: { 'nesting-rules': true }
  }),
  require('postcss-plugin-rpx2vw')()
]
</code>

package.json

browserslist:

<code>[
  "iOS >= 4",
  "Firefox >= 20",
  "Android > 4.0"
]
</code>

CSS Modules Technology Choice

Initially tried

css-loader

modules but faced global‑style handling and intrusive

className

usage. Switched to

scoped-css-loader

together with

babel-plugin-react-scoped-css

for a smoother experience.

Webpack configuration snippet:

<code>{
  test: /\.css$/i,
  use: [
    isProd ? MiniCssExtractPlugin.loader : 'style-loader',
    'css-loader',
    'postcss-loader',
    { loader: 'scoped-css-loader' }
  ]
}
</code>

.babelrc snippet:

<code>{
  "plugins": [
    "...",
    ["@babel/plugin-transform-react-jsx", { "pragma": "createElement" }],
    "babel-plugin-react-scoped-css"
  ]
}
</code>

Component example using scoped CSS:

<code>import '@assets/style/base.css';
import './index.scoped.css';

function Button(props) {
  return <button className="testBtn button">click index page</button>;
}
</code>

JSX Issues

Rax base tags (e.g.,

rax-view

) inject many default style attributes, which interfere with clean CSS writing. The team decided to use native DOM tags for most cases and reserve Rax tags for special capabilities.

<code><View className="wrap" onAppear={handleAppear} onDisappear={handleDisappear}>
  <button className="testBtn button">click index page</button>
</View>
</code>

SVG Usage and Optimization

SVG icons are processed with

svg-sprite-loader

and

svgo-loader

. A custom

Icon

component renders the sprite via

dangerouslySetInnerHTML

to work around Rax’s lack of

xlinkHref

conversion.

<code>function Icon({type, width, height, ...rest}) {
  return (
    <svg width={width} height={height} fill="currentColor" {...rest}
         xmlns="http://www.w3.org/2000/svg"
         dangerouslySetInnerHTML={{
           __html: `<use xlink:href="#icon-${type}" href="#icon-${type}"></use>`
         }}>
    </svg>
  );
}
</code>

myPlugin.js SVG handling configuration:

<code>chainWebpack(config => {
  config.module.rule('assets')
    .test(/\.(png|webp|jpe?g|gif)$/i)
    .use('source')
    .loader(require.resolve('image-source-loader'));

  config.module.rule('svg')
    .test(/\.svg$/)
    .include.add(path.join(process.cwd(), svgConfig.source)).end()
    .use('svg-sprite')
    .loader(require.resolve('svg-sprite-loader'))
    .options({ symbolId: 'icon-[name]' })
    .end()
    .use('svgo')
    .loader(require.resolve('svgo-loader'))
    .options(svgConfig.svgoConfig || defaultSvgoConfig);
});
</code>

Icon usage example:

<code><Icon type="back" className="svg" />
</code>

Interactive CLI Tool Collection

Common commands (lint, prettier, upload, etc.) are unified under a single npm package using Commander (e.g.,

eva xxx

). The package supports plugins for extensibility.

Example Husky and commitizen configuration in

package.json

:

<code>{
  "scripts": {
    "commit": "git-cz"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint",
      "commit-msg": "eva verify -E HUSKY_GIT_PARAMS"
    }
  }
}
</code>

webpack-bundle-analyzer

Used to analyze bundle size and guide optimization.

Conclusion

By extending the Rax standard with a custom scaffold, refined CSS handling, SVG optimization, and a unified CLI toolset, the interactive business can seamlessly integrate into the Rax ecosystem while satisfying its web‑focused requirements, ultimately boosting development efficiency.