概述
solid.js 是一个用于构建用户界面,简单高效、性能卓越的 JavaScript 库。
Simple and performant reactivity for building user interfaces.
特性:
- 真实 DOM 的细粒度更新
- 组件只会运行一次,不会重新执行函数体
- react 更新每次都会重新执行函数体
- 体积小,并且运行速度快
- 提供现代框架功能
- 例如 JSX、代码片段、Suspense、错误边界、并发渲染等
- web component 友好,支持自定义元素
- 支持服务端渲染
- 支持自定义渲染器
- 通过自定义渲染器,原则上可以运行在任何平台
- 社区和生态正在逐步完善
工具支持:
- 阅读源码:github.dev/solidjs/sol…
- github.dev 是一个 web 编辑器,你可以使用编辑任何仓库,只需要在 github 仓库中按下
.
按键。
- github.dev 是一个 web 编辑器,你可以使用编辑任何仓库,只需要在 github 仓库中按下
- 查看编译结果:playground.solidjs.com
相关文章:
性能对比
目录划分
packages
- solid:核心模块,包含 solid.js 基础能力实现
- solid-element: WebComponents 相关
- solid-ssr: ssr 相关,提供 ssr 渲染的辅助工具
- babel-preset-solid:babel 实现,用于转化 jsx 相关内容
- test-integration:测试相关内容
代码调试
packages/solid/package.json
- vscode 调试代码
- 开启源代码映射
{
- "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",
// ...
},
}
packages/solid/rollup.config.js
-
配置是否开启测试环境
-
配置打包文件后映射,调试其他文件类似
export 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"
+ }
}
],
// ...
}
]
接下来,就可以运行 pnpm run build
命令打包代码,然后创建测试用例,引入打包后的代码即可。