中文版

Dev-Sync-Injector

Dev-Sync-Injector is a plugin designed to be used by compilation tools.

It injects synchronization code during development to enable live reloading and hot module replacement.

Usage

In the Project

Note that to use the hot-reloading feature, you need to first include the local package in your project.

Note

• When used in conjunction with the package sync-Watcher, after starting sync-watcher, it will automatically publish your package to the local npm store.

• If you are using the dev-sync-injector plugin separately, you need to manually execute yalc publish to publish the package you want to debug to the local npm store.

Import

Using the example of the testProject package (already published to the local npm store):

First, add testProject to your project where you will start Webpack, using yalc add testProject, to make testProject available in the local npm store.

Please note that without this step, your package will not be properly monitored for synchronization!

Then, import it into your project code:

// First, import the test project
import testProject from 'testProject';
// Then, use the project
testProject();

In Webpack

To use Dev Sync Injector in Webpack, follow these steps:

1. Install the package via npm or yarn:

   npm install dev-sync-injector --save-dev
   

2. Import the plugin in your Webpack configuration file:

   const { webpackPlugin: DevSyncInjector } = require('dev-sync-injector');

3. Add the plugin to the plugins section of your Webpack configuration:

   plugins: [new DevSyncInjector()]

4. Build your project using Webpack, and the Dev Sync Injector plugin will be applied.

In Rollup

coming soon...

In Vite

coming soon...

Compatibility

Dev-Sync-Injector currently only supports Webpack 4 and below.

Support for Vite and Rollup will be added in the near future.

Please note that Dev-Sync-Injector and Sync-Watcher are not tightly coupled and can work independently. They serve different purposes but can complement each other if needed.