NiPlayer

계획

rspack + solid-JS + solid-store + pnpm + monorepo를 사용한 리팩토링;

플레이어의 전체 구조는 플레이어 레이어, 스토어 레이어 및 플러그인 레이어로 나뉩니다.

• 저장소 : 플레이어와 관련된 모든 주를 저장하여 외부 사용을위한 기본 API (해상도 스위칭, 볼륨 스위칭 등)를 제공합니다.
• 플러그인 : 플레이어의 UI 및 기능 논리를 작성하고, 상점에서 상태를 구독하고, Solid-JS가 제공 한 JSX View 솔루션을 사용하여 UI 및 상태를 바인딩하고, 상태 중심 UI를 구현하십시오.
• 플레이어 : 플레이어의 샘플 객체 및 타사는 플러그인 및 저장을 링크하는 다리로 포털을 사용합니다. 예를 들어, 상점은 플레이어의 도움으로 이벤트를 트리거하고 구독 할 수 있으며 플러그인은 플레이어의 도움으로 매장에서 주를 구독 할 수 있습니다.

구성 관련 구성

TS 데코레이터 구성

• TSCONFIG.JSON 실험용 검사기를 true로 구성합니다

   {
      "compilerOptions" : {
          "target" : "ESNext" ,
          "module" : "ES6" ,
          "experimentalDecorators" : true
      }
  }

• rspack.config.cjs babel-loader 플러그인 구성 **["@babel/plugin-proposal-decorators", { "legacy": true}] ]**

   // @ts-check
  const { defineConfig } = require ( '@rspack/cli' ) ;
  const path = require ( 'path' ) ;
  
  const config = defineConfig ( {
    module : {
      rules : [
        {
          test : / .(j|t)sx?$ / ,
          use : [
            {
              loader : 'babel-loader' ,
              options : {
                presets : [ 'solid' , '@babel/preset-typescript' ] ,
                plugins : [ 'solid-styled-jsx/babel' , [ "@babel/plugin-proposal-decorators" , { "legacy" : true } ] ]
              } ,
            } ,
          ] ,
        }
      ]
    }
  } ) ;

Solid-JS TSX 구성

기본적으로 TSX는 React의 React.CreatElement (JSX 유형 프롬프트에 대해서도 발견되는 React/JSX-Runtime 포함)를 사용하여 VDOM을 컴파일합니다. 따라서 Solid-JS + TSX 조합을 사용하려면 tsconfig.json 및 rspack.config.cjs에서 각각 특수 구성을 수행해야합니다.

• tsconfig.json

   {
      "compilerOptions" : {
          "jsx" : "preserve" ,
          "jsxImportSource" : "solid-js" ,
          "module" : "ESNext" ,
          "moduleResolution" : "Bundler"
      } 
  }

• rspack.config.cjs는 다음과 같이 babel-loader를 구성합니다.

  • 사전 설정 : solid @babel/preset-typescript

전체 컴파일 프로세스 :

1. @babel/preset-typescript + tsconfig.json은 tsx → jsx를 제공하고 JSX 구문을 유지합니다 (tsconfig.json의 JSX 구성 보존이기 때문에);
2. Solid는 JSX 구문을 JS 코드로 컴파일합니다

관련 문서 : https://niplayer.js.org/