solid.js

概述

solid.js 是一个用于构建用户界面，简单高效、性能卓越的 JavaScript 库。

Simple and performant reactivity for building user interfaces.

特性：

• 真实 DOM 的细粒度更新
• 组件只会运行一次，不会重新执行函数体
  • react 更新每次都会重新执行函数体
• 体积小，并且运行速度快
• 提供现代框架功能
  • 例如 JSX、代码片段、Suspense、错误边界、并发渲染等
• web component 友好，支持自定义元素
• 支持服务端渲染
• 支持自定义渲染器
  • 通过自定义渲染器，原则上可以运行在任何平台
• 社区和生态正在逐步完善

工具支持：

• 阅读源码：https://github.dev/solidjs/solid
  • github.dev 是一个 web 编辑器，你可以使用编辑任何仓库，只需要在 github 仓库中按下 . 按键。
• 查看编译结果：https://playground.solidjs.com

相关文章：

• 如何评价前端框架 Solid?

• 精读《SolidJS》

• Introduction to Reactivity with SolidJS

• React vs SolidJS, Fight!

性能对比

js-framework-benchmark

目录划分

https://github.com/solidjs/solid

packages

• solid：核心模块，包含 solid.js 基础能力实现
• solid-element： WebComponents 相关
• solid-ssr： ssr 相关，提供 ssr 渲染的辅助工具
• babel-preset-solid：babel 实现，用于转化 jsx 相关内容
• test-integration：测试相关内容

代码调试

packages/solid/package.json

• vscode 调试代码
• 开启源代码映射

copy{
-  "type": "module",
+  "type": "commonjs"
  "scripts": {
    "build": "npm-run-all -nl build:*",
    "build:clean": "rimraf dist/ coverage/ store/dist/ web/dist/ h/dist/ h/jsx-runtime/dist html/dist/",
-    "build:js": "rollup -c",
+    "build:js": "rollup -c  --sourcemap",
    // ...
  },
}
diff

packages/solid/rollup.config.js

• 配置是否开启测试环境

• 配置打包文件后映射，调试其他文件类似

copyexport default [
  {
    input: "src/index.ts",
    output: [
      {
        file: "dist/solid.cjs",
        format: "cjs"
      },
      {
        file: "dist/solid.js",
        format: "es"
      }
    ],
    plugins: [
      replace({
-       '"_SOLID_DEV_"': false,
        preventAssignment: true,
        delimiters: ["", ""]
      })
    ].concat(plugins)
  },
  {
    input: "web/src/index.ts",
    output: [
      {
        file: "web/dist/web.cjs",
        format: "cjs"
      },
      {
        file: "web/dist/web.js",
        format: "es",
+        paths: {
+          "solid-js": "../../dist/solid.js"
+        }
      }
    ],
   	// ...
  }
]
diff

接下来，就可以运行 pnpm run build 命令打包代码，然后创建测试用例，引入打包后的代码即可。

配置案例