rsbuild-pipe 1.0.0

package/README.md

@@ -0,0 +1,9 @@
+# rsbuild-pipe
+
+rsbuild开发和打包管道
+
+## Change Log
+v1.0.0
+```
+
+```

package/index.ts

@@ -0,0 +1,2 @@
+export * from "./lib/rsbuild.base.config";
+export * as extendConfig from "./lib/rsbuild.extend.config";

package/lib/helper.ts

@@ -0,0 +1,23 @@
+const path = require('path');
+const fs = require('fs');
+
+
+export const copy = (sd, td) => {
+  // 读取目录下的文件，返回文件名及文件类型{name: 'xxx.txt, [Symbol(type)]: 1 }
+  const sourceFile = fs.readdirSync(sd, { withFileTypes: true })
+  for (const file of sourceFile) {
+    // 源文件 地址+文件名
+    const srcFile = path.resolve(sd, file.name)
+    // 目标文件
+    const tagFile = path.resolve(td, file.name)
+    // 文件是目录且未创建
+    if (file.isDirectory() && !fs.existsSync(tagFile)) {
+      fs.mkdirSync(tagFile, err => console.log(err))
+      copy(srcFile, tagFile)
+    } else if (file.isDirectory() && fs.existsSync(tagFile)) {
+      // 文件时目录且已存在
+      copy(srcFile, tagFile)
+    }
+    !file.isDirectory() && fs.copyFileSync(srcFile, tagFile, fs.constants.COPYFILE_FICLONE)
+  }
+}

package/lib/rsbuild.base.config.ts

@@ -0,0 +1,98 @@
+import { mergeRsbuildConfig, type RsbuildConfig } from '@rsbuild/core';
+import { pluginReact, type PluginReactOptions } from '@rsbuild/plugin-react';
+import { pluginSvgr, PluginSvgrOptions } from "@rsbuild/plugin-svgr";
+import { pluginTypeCheck, PluginTypeCheckerOptions } from '@rsbuild/plugin-type-check';
+import { pluginBasicSsl } from '@rsbuild/plugin-basic-ssl';
+
+export * as helper from "./helper";
+export * from "@rsbuild/core";
+export * from '@rsbuild/plugin-react';
+export * from "@rsbuild/plugin-svgr";
+export * from '@rsbuild/plugin-type-check';
+export * from '@rsbuild/plugin-basic-ssl';
+const deepmerge = require("deepmerge");
+
+export { deepmerge };
+export const isProd = process.env.NODE_ENV === 'production'; // 是否为生成环境打包
+
+interface GetBaseConfigParams {
+  rsbuildConfig?: RsbuildConfig,
+  pluginBasicSslEnable?: boolean,   // 是否使用插件: @rsbuild/plugin-basic-ssl
+  pluginReactEnable?: boolean,   // 是否使用插件: @rsbuild/plugin-react
+  pluginReactOptions?: PluginReactOptions,
+  pluginSvgrEnable?: boolean,   // 是否使用插件: @rsbuild/plugin-svgr
+  pluginSvgrOptions?: PluginSvgrOptions,
+  pluginTypeCheckEnable?: boolean,   // 是否使用插件: @rsbuild/plugin-type-check
+  pluginTypeCheckerOptions?: PluginTypeCheckerOptions,
+};
+
+export const getBaseConfig = (params: GetBaseConfigParams = {}):RsbuildConfig => {
+  const { 
+    rsbuildConfig = {}, 
+    pluginBasicSslEnable = false, 
+    pluginReactEnable = true, 
+    pluginReactOptions = {},
+    pluginSvgrEnable = true, 
+    pluginSvgrOptions = {},
+    pluginTypeCheckEnable = true, 
+    pluginTypeCheckerOptions = {},
+  } = params;
+  
+  return mergeRsbuildConfig({
+    html: {
+      template: "./public/index.html"
+    },
+    // 1. 入口配置
+    source: {
+      entry: {
+        index: './src',
+      },
+      alias: {
+        '@/': './src/',
+        'vendor/': '../vendor/',
+      },
+    },
+    // 开发服务器配置
+    server: {
+      publicDir: {
+        name: "./public",   // 作为静态资源服务的文件夹
+        copyOnBuild: false,
+      },
+      htmlFallback: false,
+      historyApiFallback: {
+        index: '/index.html',
+      },
+    },
+    output: {
+      overrideBrowserslist: [
+        // 'chrome >= 87', 'edge >= 88', 'firefox >= 78', 'safari >= 14',
+        'chrome >= 100'
+      ]
+    },
+    // 插件配置
+    plugins: [
+      // react插件true
+      pluginReactEnable ? pluginReact(pluginReactOptions) : null,
+
+      // typescript 语法检查,注意语法错误只能在命令行中输出，不能再页面中输出
+      pluginTypeCheckEnable ? pluginTypeCheck(deepmerge({
+        forkTsCheckerOptions: {
+          async: true,
+          devServer: true, // 输出到webpack-dev-server服务中
+          typescript: {
+            memoryLimit: 2048
+          }
+        }
+      }, pluginTypeCheckerOptions)): null,
+  
+      // svg转为react组件
+      pluginSvgrEnable ? pluginSvgr(deepmerge({
+        mixedImport: true,
+      }, pluginSvgrOptions)) : null,
+
+      // 是否使用自签名的https证书
+      pluginBasicSslEnable ? pluginBasicSsl() : null,
+    ],
+  }, rsbuildConfig);
+}
+

package/lib/rsbuild.extend.config.ts

@@ -0,0 +1,128 @@
+import { pluginNodePolyfill } from '@rsbuild/plugin-node-polyfill';
+import { pluginBabel, PluginBabelOptions } from '@rsbuild/plugin-babel';
+
+import { isProd, rspack, helper, type RsbuildConfig } from './rsbuild.base.config';
+const path = require("path");
+const fs = require("fs");
+
+interface GetBabelConfigParams{
+  styledJsxEnabled?: boolean,
+  modifyConfig?:(config:PluginBabelOptions["babelLoaderOptions"]) => PluginBabelOptions["babelLoaderOptions"],
+}
+
+/**
+ * 参数文档配置: https://rsbuild.dev/zh/plugins/list/plugin-babel
+ * 获取babel配置
+ */
+export const getBabelConfig = (params:GetBabelConfigParams = {}): RsbuildConfig => {
+  const {styledJsxEnabled = true, modifyConfig} = params;
+
+  return {
+    plugins: [
+      // babel插件
+      pluginBabel({
+        babelLoaderOptions: (config) => {
+          // 添加styled-jsx的使用
+          if(styledJsxEnabled) config.plugins?.push([
+            "styled-jsx/babel",
+            {
+              "vendorPrefixes": true,     // 为css自动添加前缀
+              "optimizeForSpeed": isProd, // 是否优化
+              "plugins": [
+                ["styled-jsx-plugin-sass", { sassOptions: {} }]
+              ]
+            }
+          ]);
+
+          if(modifyConfig) modifyConfig(config)
+        },
+      }),
+    ]
+  }
+}
+
+/**
+ * 配置cesium engine
+ */
+export const getCesiumEngineConfig = ({ srcDirPath, distDirPath }: {
+  srcDirPath: string,   // cesium engine的基础目录路基
+  distDirPath: string,  // 目标路径
+}): RsbuildConfig => {
+  // const cesiumEngineBase = '../vendor/node_modules/@cesium/engine'; // cesium engine的源码目录
+  // const distDir = "static"; // 目标目录
+
+  const config: RsbuildConfig = {
+    output: {
+      copy: [
+        // { from: path.join(srcDirPath, 'Build/Workers'), to: distDirPath+'/Workers' },
+        { from: path.join(srcDirPath, 'Source/Assets'), to: distDirPath + '/Assets' },
+        { from: path.join(srcDirPath, 'Build/ThirdParty'), to: distDirPath + '/ThirdParty' },
+      ],
+    },
+    plugins: [
+      pluginNodePolyfill({
+        globals: {
+          // @ts-ignore
+          https: false,
+          http: false,
+          zlib: false,
+          url: false,
+          buffer: false,
+          assert: false,
+          util: false,
+          stream: false,
+        }
+      })
+    ],
+
+    tools: {
+      rspack: {
+        // 注意: rsbuild编译代码时import.meta不支持，暂时将import.meta替换成'{}'空对象
+        plugins: [
+          new rspack.DefinePlugin({
+            'import.meta': '{}'
+          })
+        ],
+        module: {
+          rules: [
+            // 添加.glsl文件转为字符串
+            {
+              test: /\.glsl$/,
+              type: 'asset/source',
+            },
+          ]
+        }
+      }
+    },
+  }
+
+  // TODO: 开发环境下copy Build/Workers正常，生成环境下打包copy Build/Workers会报如下错误:
+  //   × JavaScript parsing error: 'import', and 'export' cannot be used outside of module code
+  //     ╭─[24:1]
+  //  24 │  */
+  //  25 │ 
+  //  26 │ import {
+  //     · ──────
+  //  27 │   defined_default
+  //  28 │ } from "./chunk-YBKFS53K.js";
+  //     ╰────
+  // 所以在生成环境下打包不器用copy Build/Workers, 而是采用打包换成后再将Build/Workers放到指定目录中, 
+  // copy过程暂时发到package.json scripts build命令中了，请参照
+  
+  if (!isProd) {
+    if (config.output?.copy) {
+      (config.output?.copy as any[]).push({
+        from: path.join(srcDirPath, 'Build/Workers'), to: distDirPath + '/Workers'
+      })
+    }
+  }else{
+    setTimeout(() => {
+      // console.log("1111111111111111111111111111111111111111111111111111111");
+      const dist = path.join(path.resolve('./'), "dist/"+distDirPath+"/Workers");
+      if(!fs.existsSync(dist)) fs.mkdirSync(dist, {recursive: true});
+      helper.copy(path.join(srcDirPath, 'Build/Workers'),dist)
+    }, 3000)
+  }
+
+  return config;
+}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "rsbuild-pipe",
+  "version": "1.0.0",
+  "author": "chencheng <daniel_txy@163.com>",
+  "description": "rsbuild pipe",
+  "main": "index",
+  "dependencies": {
+    "@rsbuild/core": "0.6.15",
+    "@rsbuild/plugin-babel": "0.6.15",
+    "@rsbuild/plugin-basic-ssl": "0.6.15",
+    "@rsbuild/plugin-node-polyfill": "0.6.15",
+    "@rsbuild/plugin-react": "0.6.15",
+    "@rsbuild/plugin-svgr": "0.6.15",
+    "@rsbuild/plugin-type-check": "0.6.15",
+    "@types/node": "20.12.12",
+    "deepmerge": "4.3.1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitee.com/cloud_soldier/rsbuild-pipe.git"
+  },
+  "license": "ISC",
+  "bugs": {
+    "url": "https://gitee.com/cloud_soldier/rsbuild-pipe/ssues"
+  },
+  "homepage": "https://gitee.com/cloud_soldier/rsbuild-pipe#readme",
+  "devDependencies": {
+    "typescript": "5.4.5"
+  }
+}