基于webpack与TypeScript的SolidJS项目搭建

本文将讲述如何基于webpack与TypeScript搭建一个基础的支持less模块的solidjs项目。方便后续涉及到solidjs相关分析与讨论都可以基于本文的成果之上进行。

前置

1. nodejs v14+
2. 全局yarn（npm亦可）
3. 稳定的网络环境

创建根目录solidjs-webpack-ts-example：

yarn初始化

git初始化

库安装

webpack 4件套

样式处理 4件套

1. less：less核心编译解析库；
2. less-loader：webpack与less的桥梁。当webpack处理less时，通过配置指定交给less-loader，less-loader调用安装的less，将less代码编译为css代码；
3. css-loader：wepback处理css样式代码的loader。处理css，或处理来自less编译成的css；
4. mini-css-extract-plugin：css样式处理最后一个环节，交给该插件的提供的loader、plugin完成独立样式文件打包生成。

babel 7件套

1. @babel/core：babel核心库；
2. @babel/preset-env、@babel/preset-typescript、babel-preset-solid（这个preset名字目前没有符合babel规范）：babel扩展preset，整合当前主流浏览器支持语法、typescript语法支持以及solidjs相关语法支持；
3. @babel/plugin-proposal-class-properties、@babel/plugin-proposal-object-rest-spread：babel扩展插件，支持类定义属性以及...剩余属性解构语法；
4. babel-loader：webpack与babel的桥梁。当webpack处理相关代码的时候，通过配置指定交给babel-loader，babel-loader内部调用上述第1个babel核心库，并结合相关的preset、plugin完成代码编译。

TypeScript 1件套

实际山，主流IDE（WebStorm、VSCode）等都内置了TypeScript库，可以不用安装TS，只需要配置tsconfig.json就可以完成代码编写过程中的类型检查（babel编译的时候，不会进行类型检查）。关于这一块，推荐大家阅读另一篇文章：【长文详解】TypeScript与Babel、webpack的关系以及IDE对TS的类型检查 - 知乎 (zhihu.com)。

为了方便的进行类型检查，本样会安装项目级：

至此，我们安装了目前基础项目所需要的开发依赖（devDependencies）。

SolidJS 2件套

1. solid-js：SolidJs核心库；
2. @solidjs/router：solidjs官方SPA路由组件。

项目配置

tsconfig.json

项目根目录

webpack.config.js

项目根目录

.babelrc

项目根目录

package.json

添加开发、构建以及类型检查脚本：

初始文件创建

app.d.ts

路径：项目根目录/src/app.d.ts。涉及到譬如less模块在ts中使用的类型定义。

index.html

路径：项目根目录/public/index.html（主要是与webpack中的HtmlWebpackPlugin.template选项对应）。

PS：public目录还创建了一个icon，就不详细说明了。

index.tsx

路径：项目根目录/src/index.tsc

index.module.less

路径：项目根目录/src/index.module.less

项目运行效果

010-example-show

附录

项目代码地址：

w4ngzhen/solidjs-webpack-ts-example (github.com)