NiPlayer

تخطيط

refactoring باستخدام RSPACK + Solid-JS + Solid Store + PNPM + Monorepo ؛

يتم تقسيم الهيكل العام للاعب إلى طبقة المشغل ، وطبقة المتجر ، وطبقة البرنامج المساعد ؛

• المتجر: يخزن جميع الولايات المتعلقة بالمشغل ، وتوفير واجهة برمجة التطبيقات الأساسية للاستخدام الخارجي (تبديل الدقة ، وتبديل الصوت ، وما إلى ذلك).
• المكون الإضافي: اكتب واجهة المستخدم للاعب والمنطق الوظيفي ، واشترك في الحالة في المتجر ، وربط واجهة المستخدم والحالة باستخدام حل عرض JSX المقدم من Solid-JS ، وتنفيذ واجهة المستخدم التي يحركها الحالة.
• اللاعب: يستخدم كائن عينة المشغل وجهة خارجية بوابة ، كجسر لربط المكون الإضافي والتخزين. على سبيل المثال: يمكن للمتجر أن يؤدي إلى الأحداث واشتراكها في الأحداث بمساعدة المشغل ، ويمكن للمكون الإضافي الاشتراك في الحالات في المتجر بمساعدة اللاعب.

التكوين المتعلق

تكوين ديكور TS

• tsconfig.json تكوين التجارب إلى True

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

• RSPACK.CONFIG.CJS Babel-Loader Configuration **["@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 } ] ]
              } ,
            } ,
          ] ,
        }
      ]
    }
  } ) ;

التكوين الصلبة-JS TSX

بشكل افتراضي ، يقوم TSX بتجميع VDOD باستخدام React's 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. يتم تجميع بناء الجملة JSX في رمز JS

المستندات ذات الصلة: https://niplayer.js.org/