@fnet/rollup-plugin-browsersync

The @fnet/rollup-plugin-browsersync is a plugin designed to enhance your development workflow by integrating BrowserSync with Rollup. This tool provides a simple way to automatically refresh your web page in response to changes in your project files, thereby reducing manual reload effort and improving your development efficiency.

How It Works

This plugin operates as an extension to Rollup, a popular module bundler for JavaScript. When you bundle your JavaScript files with Rollup, the plugin checks whether BrowserSync, a tool for live reloading and syncing browsers, is active. If not active, it initializes BrowserSync using the options you provide. During subsequent builds, the plugin refreshes the browser whenever Rollup emits a new bundle, ensuring that you see the latest changes without needing to reload the page manually.

Key Features

• Automatic Reloading: Automatically refresh your browser whenever you make changes to your codebase.
• Easy Setup: Integrate seamlessly with Rollup by providing simple configuration options for BrowserSync.
• Efficient Development: Save time on manual page reloads, focusing more on development work.

Conclusion

@fnet/rollup-plugin-browsersync is a straightforward addition to your development toolkit, aimed at improving productivity by automating the page refresh process during development. This plugin keeps your browser updated with code changes, allowing for a smoother and more efficient workflow.

@fnet/rollup-plugin-browsersync Developer Guide

Overview

The @fnet/rollup-plugin-browsersync library integrates BrowserSync with Rollup, allowing developers to automatically refresh browsers or devices whenever files are changed and bundled by Rollup. This plugin is designed to streamline the development process by providing live-reloading of your application during the development phase.

Installation

To install the library, you can use npm or yarn:

Using npm:

npm install --save-dev @fnet/rollup-plugin-browsersync

Using yarn:

yarn add @fnet/rollup-plugin-browsersync --dev

Usage

To utilize the @fnet/rollup-plugin-browsersync in your Rollup project, you'll need to configure it within your Rollup configuration file. Below, we provide steps and examples to set up and use the plugin effectively.

Step-by-step Integration

1. Import the Plugin: Start by importing the @fnet/rollup-plugin-browsersync.

2. Configure the Plugin: Define your BrowserSync options. This can include settings such as the server, port, and files to watch.

3. Add to Rollup's Plugins: Integrate the plugin into the Rollup configuration's plugins array.

Code Implementation

Here is a straightforward example showcasing how to set up the plugin:

// rollup.config.js
import browserSyncPlugin from '@fnet/rollup-plugin-browsersync';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    browserSyncPlugin({
      server: 'dist',
      port: 3000,
      files: ['dist/**/*.js', 'dist/**/*.css']
    })
  ]
};

In the example above:

• server: Serves files from the dist directory.
• port: The server runs on port 3000.
• files: Watches JavaScript and CSS files in the dist directory for changes, triggering reloads when these files are updated.

Examples

Basic Setup

This example sets up a simple development server with BrowserSync using Rollup.

// rollup.config.js
import browserSyncPlugin from '@fnet/rollup-plugin-browsersync';

export default {
  input: 'src/main.js',
  output: {
    file: 'public/bundle.js',
    format: 'iife'
  },
  plugins: [
    browserSyncPlugin({
      server: 'public',
      files: ['public/**/*.html', 'public/bundle.js']
    })
  ]
};

Advanced Configuration

You can also provide more advanced configurations, such as proxy settings or middleware options if needed.

// rollup.config.js
import browserSyncPlugin from '@fnet/rollup-plugin-browsersync';

export default {
  input: 'src/app.js',
  output: {
    file: 'static/app.js',
    format: 'esm'
  },
  plugins: [
    browserSyncPlugin({
      proxy: 'yourlocal.dev',
      files: ['static/**/*.{js,css,html}']
    })
  ]
};

This advanced setup is useful if you are running a local development server and want BrowserSync to act as a proxy.

Acknowledgement

This plugin utilizes the browser-sync package to offer live-reloading capabilities. Acknowledgments to the BrowserSync team for their versatile tool. If you have feedback or wish to contribute, please refer to the project's contribution guidelines.

Input Schema

$schema: https://json-schema.org/draft/2020-12/schema
type: object
properties:
  browserSyncOptions:
    type: object
    description: Configuration options for the BrowserSync instance.
    properties:
      ui:
        type: object
        description: UI configuration options for BrowserSync.
        properties:
          port:
            type: integer
            description: Port for the BrowserSync UI.
          weinre:
            type: object
            description: Weinre configuration settings for BrowserSync.
            properties:
              port:
                type: integer
                description: Port for the Weinre server.
      files:
        type: array
        description: Files to watch for changes.
        items:
          type: string
      watch:
        type: boolean
        description: Enable file watching.
        default: true
      watchEvents:
        type: array
        description: Specify which events to watch files for.
        items:
          type: string
        default:
          - change
      server:
        description: Static server configuration options.
        oneOf:
          - type: boolean
          - type: object
            properties:
              baseDir:
                type: string
                description: Base directory for the server.
              index:
                type: string
                description: Specify which file should be served as the index.
              routes:
                type: object
                description: Custom route mappings for the server.
                additionalProperties:
                  type: string
      proxy:
        description: Proxy configuration options.
        oneOf:
          - type: string
          - type: object
            properties:
              target:
                type: string
                description: Target for the proxy.
      port:
        type: integer
        description: Port for BrowserSync to run on.
      open:
        type:
          - boolean
          - string
        description: Configure BrowserSync to open after starting.
      browser:
        type:
          - array
          - string
        description: Specify which browser(s) to open.
      notify:
        type: boolean
        description: Enable/disable notifications in the browser.
        default: true
    additionalProperties: true
required: []