DOCSEARCHbyAlgolia
Submit Docs

reSKRipt Documentation

website·Indexed 29 days ago

https://reskript.vercel.app/

A build tool and framework for React applications featuring a CLI (skr) for development, building, linting, and testing. It provides built-in support for Web Workers, Service Workers, CSS Modules, and a unique 'feature matrix' for managing multiple environment builds. The tool supports both webpack and Vite engines and includes a plugin system for extending functionality, such as SASS and qiankun integration.

Tokens
35.6K
Snippets
234
Records
289
Agent score
75%

What's inside reSKRipt

  2. Use @reskript/plugin-workspace-no-build for monorepo internal imports

    The @reskript/plugin-workspace-no-build plugin allows a Web application in a monorepo to import other internal packages directly from their src directories. This eliminates the need to build internal packages or publish them to an npm registry.

    Requirements for use:

    1. The project must be a monorepo.
    2. Internal packages do not need to be published to npm.
    3. One or more packages are Web applications, and others are dependencies for those apps.
    4. Source code (scripts and styles) of all packages must be compatible with reSKRipt build.
    5. Source code for all packages must reside in a src directory (this is hardcoded).
    /packages
    /web # Web application entry
    /util # Utility package
        /src
            index.ts
        package.json # name: @me/util
    /component # Component package
        /src
        package.json # name: @me/component
package.json # contains workspaces property

    // In packages/web: import {parseDate} from '@me/util'; // Resolves to packages/util/src/index.ts import Label from '@me/component/Label'; // Resolves to packages/component/Label/index.tsx

  3. Switch between Webpack and Vite drivers in reSKRipt

    reSKRipt V4 implements a 'dual-engine' architecture. By passing the driver name (e.g., 'webpack' or 'vite') as the first argument to the configure function, you can choose the underlying build tool for build, dev, and play commands.
    // Example using Webpack
export default configure('webpack', { ... });

// Example using Vite
export default configure('vite', { ... });

  4. Manage styles using CSS Modules in reSKRipt

    reSKRipt uses CSS Modules globally by default, with the exception of files named .global.css or .global.less and third-party styles. When a style file is imported, it behaves as a function similar to classnames while also allowing object-based access to specific class names.

  5. Configure build engines in reSKRipt V4

    reSKRipt V4 introduces a 'dual-engine' architecture. The configure function now accepts an engine identifier (e.g., 'webpack') as the first argument, allowing the tool to support both Webpack and Vite as underlying drivers for build, dev, and play commands.
    export default configure(
    'webpack', // Specify the engine here (e.g., 'webpack' or 'vite')
    {
        // ...
    }
);

  6. Support for multiple build drivers (Webpack and Vite)

    v4-modern-module
    reSKRipt V4 is designed as a 'dual-engine' tool. It supports both Webpack and Vite as underlying drivers for build, dev, and play commands. The driver is specified as the first argument in the configure function.
    export default configure(
    'vite', // or 'webpack'
    {
        // ...
    }
);

  7. Serve static files using the public directory

    Static files that need to be accessible directly via URL during development can be placed in the public folder at the project root. For example, a file at public/about.html can be accessed via the URL /about.html.

    Constraints and Caveats:

    • Do not place an index.html file in the public folder, as it will prevent the main application from being accessible.
    • The public folder is only used by the development server; it is not processed during the production build. You must manually handle these files (e.g., using cp) for deployment.

  8. Integrate qiankun micro-frontend with Reskript

    The @reskript/plugin-qiankun plugin handles the integration of applications with the qiankun micro-frontend framework during the build process. It modifies the output format to UMD to allow dynamic loading at runtime and optionally provides a local development container to test qiankun lifecycle compatibility.

    Critical Constraints:

    • Engine Support: This plugin only supports the webpack engine. It is incompatible with Vite because Vite's build output uses <script type="module">.
    • Lifecycle Functions: This plugin does not implement qiankun lifecycle functions for you. You must manually export the required lifecycles from your sub-app entry as per the official qiankun documentation.

  9. Upgrade to reSKRipt V2

    v2-long-awaited
    reSKRipt V2 introduces significant changes, including the adoption of webpack-dev-server v4.0 for more stable hot updates and a better logging architecture. To facilitate the upgrade, a migration doctor tool is available to automatically detect necessary changes in your project.
    npx @reskript/doctor migrate-v2

  10. Supported styling languages in reSKRipt

    reSKRipt supports CSS and LESS. Other languages like SASS and Stylus are not supported. Due to the compilation performance of LESS and the recommendation to keep React components small, using pure CSS is preferred.

  11. Identify React components via displayName and source paths

    reSKRipt automatically assigns a displayName to React components defined as functions (using PascalCase naming). In development mode, it injects code to allow developers to locate the corresponding source file for a component directly within React Devtools.

    Note: These features only support function declarations (e.g., function FooBar() {}). Arrow functions and function expressions are not supported.

    function FooBar() {
    return <div />;
}

  12. Install fixed versions of @reskript packages

    v2
    Starting with V2, it is recommended to use fixed versions instead of version ranges (removing the ^ symbol) for all @reskript/* packages to ensure stability. After updating package.json, run your package manager's install command to update the lock file.
     "devDependencies": {
-  "@reskript/cli": "^1.15.2",
+  "@reskript/cli": "1.15.2"
 }