Null Pointer Micromanagement

    projext-plugin-rollup-react

    4.0.1 • Public • Published

    projext plugin for React on Rollup

    Travis Coveralls github David David

    Allows you to bundle a React project with projext using the Rollup build engine.

    Introduction

    projext allows you to configure a project without adding specific settings for a module bundler, then you can decide which build engine to use. This plugin is meant to be used when you are bundling a React application and you are using the Rollup build engine.

    It adds the required presets to the Babel configuration in order to add support for JSX code.

    Information

    - -
    Package projext-plugin-rollup-react.
    Description Allows you to bundle a React project with projext using the Rollup build engine.
    Node Version >= v10.13.0

    Usage

    1. You first need the build engine, so install projext-plugin-rollup.
    2. Add a new setting to your target named framework and set its value to react.
    3. Done

    Now, when your target gets builded, the plugin will check if the target is using Rollup and if the framework is react, then it will make the necessary changes to bundle the JSX code.

    Server side rendering

    Server side rendering (SSR) is when you render your application on the server (backend) as a string, serve it on the browser and then you app runs in order to add all the JS magic.

    Let's say you have a backend target with your Node server code, and a frontend target with your React code, and you want to require your frontend code on the backend in order to use ReactDOM.renderToString(...):

    For your backend target you'll have to define its framework property to react, so the plugin can include the JSX preset, and then make sure you included the frontend target on the includeTargets setting:

    module.exports = {
      targets: {
        backend: {
          type: 'node',
          framework: 'react',
          includeTargets: ['frontend'],
        },
      },
    };

    includeTargets is a default setting provided by project. It tells the build engine that the files from the specified target(s) should also be transpiled/processed.

    Done, now you can require/import files from your frontend target on the backend target and everything will work.

    Babel

    This plugin adds the react preset for JSX support.

    External dependencies

    When bundling your targets, the plugin will check if the target is for Node or if it is a browser library and automatically exclude the React packages so they don't end up on your build.

    Development

    Yarn/NPM Tasks

    Task Description
    yarn test Run the project unit tests.
    yarn run lint Lint the modified files.
    yarn run lint:full Lint the project code.
    yarn run docs Generate the project documentation.

    Testing

    I use Jest with Jest-Ex to test the project. The configuration file is on ./.jestrc, the tests and mocks are on ./tests and the script that runs it is on ./utils/scripts/test.

    Linting

    I use ESlint to validate all our JS code. The configuration file for the project code is on ./.eslintrc and for the tests on ./tests/.eslintrc (which inherits from the one on the root), there's also an ./.eslintignore to ignore some files on the process, and the script that runs it is on ./utils/scripts/lint.

    Documentation

    I use ESDoc to generate HTML documentation for the project. The configuration file is on ./.esdocrc and the script that runs it is on ./utils/scripts/docs.

    Keywords

    none

    Install

    npm i projext-plugin-rollup-react

    DownloadsWeekly Downloads

    2

    Version

    4.0.1

    License

    MIT

    Unpacked Size

    288 kB

    Total Files

    23

    Last publish

    Collaborators

    • homer0