NiPlayer

การวางแผน

refactoring โดยใช้ RSPACK + SOLID-JS + SOLID-STORE + PNPM + MONOREPO;

โครงสร้างโดยรวมของผู้เล่นแบ่งออกเป็นเลเยอร์ผู้เล่นชั้นเก็บและเลเยอร์ปลั๊กอิน

• ร้านค้า: จัดเก็บทุกรัฐที่เกี่ยวข้องกับผู้เล่นโดยให้ API พื้นฐานสำหรับการใช้งานภายนอก (การสลับความละเอียดการสลับระดับเสียง ฯลฯ )
• ปลั๊กอิน: เขียน UI และตรรกะการทำงานของผู้เล่นสมัครสมาชิกในสถานะในร้านค้าผูก UI และสถานะโดยใช้โซลูชันมุมมอง JSX ที่จัดทำโดย SOLID-JS และใช้ UI ที่ขับเคลื่อนด้วยสถานะ
• ผู้เล่น: วัตถุตัวอย่างของผู้เล่นและพอร์ทัลใช้บุคคลที่สามเป็นพอร์ทัลเป็นบริดจ์เพื่อเชื่อมโยงปลั๊กอินและจัดเก็บ ตัวอย่างเช่น: ร้านค้าสามารถทริกเกอร์และสมัครสมาชิกกิจกรรมด้วยความช่วยเหลือของผู้เล่นและปลั๊กอินสามารถสมัครสมาชิกในรัฐในร้านค้าด้วยความช่วยเหลือของผู้เล่น

การกำหนดค่าที่เกี่ยวข้อง

การกำหนดค่า TS Decorator

• tsconfig.json กำหนดค่าการทดลองใช้เป็นจริง

   {
      "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 จะรวบรวม VDOM โดยใช้ React.createlement (รวมถึง React/JSX-Runtime ที่พบได้สำหรับการแจ้งประเภท JSX); ดังนั้นหากคุณต้องการใช้การรวมกันของ 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 ไว้ในนั้น (เพราะการรักษาของการกำหนดค่า JSX ของ tsconfig.json);
2. Solid Compiles JSX ไวยากรณ์ลงในรหัส JS

เอกสารที่เกี่ยวข้อง: https://niplayer.js.org/