Neodymium Plated Magnet

    @attachments/serendipity-plugin-react
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.16 • Public • Published

    @attachments/serendipity-plugin-react

    概述

    提供封装好的 react 服务 (基于 webpack 5),包括开发与构建。

    安装

    npx @attachments/serendipity add @attachments/serendipity-plugin-react

    scripts

    react start

    启动 webpack-dev-server (开发环境,支持热更新)

    react build

    打包项目 (生产环境)

    参数

    interface ReactPluginOptions {
      // webpack 配置
      webpackConfig?: WebpackConfiguration
    
      // dev server 配置
      devServerConfig?: WebpackDevServerConfiguration
    
      // 端口
      port?: number
    
      // host
      host?: string
    
      // webpack analysis port
      analysisPort?: number
    }

    For Other Plugins

    下面的 pluginInstance 表示插件实例,你可以在其它插件的 runtime 方法下通过以下方法获取:

    class FooPlugin {
      @Runtime()
      initBabelForReactProject(options: RuntimeOptions) {
        const plugin = options.matchPlugin('serendipity-react-plugin')
        const instance: SerendipityReactPlugin = plugin.getPluginInstance() as SerendipityReactPlugin
        if (instance) {
          // do something....
        }
      }
    }

    API

    pluginInstance.reactServiceHooks

    生命周期钩子

    // 合并 webpack 配置
    instance.reactServiceHooks.beforeWebpackStart.tap('foo', (mergeFn) => {
      mergeFn({
        // 要合并的 webpack 配置
      })
    })
    
    instance.reactServiceHooks.beforeDevServerStart.tap('foo', (mergeFn) => {
      mergeFn({
        // 要合并的 webpack-dev-server 配置
      })
    })

    案例

    下面的案例添加了 HtmlWebpackPlugin 到 webpack 配置中:

    class FooPlugin {
      @Runtime()
      initBabelForReactProject(options: RuntimeOptions) {
        const plugin = options.matchPlugin('serendipity-react-plugin')
        const instance: SerendipityReactPlugin = plugin.getPluginInstance() as SerendipityReactPlugin
        if (plugin && instance) {
          instance.reactServiceHooks.beforeWebpackStart.tap('webpackMerge', (mergeFn) => {
            mergeFn({
              plugins: [
                new HtmlWebpackPlugin()
              ]
            })
          })
        }
      }
    }

    Keywords

    none

    Install

    npm i @attachments/serendipity-plugin-react

    DownloadsWeekly Downloads

    52

    Version

    0.1.16

    License

    MIT

    Unpacked Size

    51.5 kB

    Total Files

    62

    Last publish

    Collaborators

    • yzl520