NiPlayer下載NiPlayer源代碼下載

NiPlayer

網站數據

V1.4.3

下載

規劃

使用rspack + solid-js + solid-store + pnpm + monorepo 進行重構；

播放器整體結構劃分為player層，store層，plugin層；

store：存儲播放器相關的所有state，提供底層api供外部使用（清晰度切換，音量切換等）。
plugin: 編寫播放器的UI和功能邏輯，通過訂閱store中的state，使用solid-js 提供的jsx視圖解決方案將UI 和state 進行綁定，實現state驅動ui。
player: 播放器的示例對象和第三方使用入口，作為鏈接plugin和store的橋樑例如：store借助player可以觸發和訂閱事件，plugin借助player可以訂閱store內的狀態。

配置相關

TS裝飾器配置

tsconfig.json 配置experimentalDecorators 為true

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

rspack.config.cjs babel-loader plugins 處配置**["@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創建Vdom（包括jsx類型提示也是找的react/jsx-runtime）; 因此若想使用solid-js + tsx 組合，需要分別在tsconfig.json 和rspack.config.cjs 進行特殊配置：

tsconfig.json

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