基于webpack与TypeScript的SolidJS项目搭建
本文将讲述如何基于webpack与TypeScript搭建一个基础的支持less模块的solidjs项目。方便后续涉及到solidjs相关分析与讨论都可以基于本文的成果之上进行。
前置
- nodejs v14+
- 全局yarn(npm亦可)
- 稳定的网络环境
创建根目录solidjs-webpack-ts-example
:
mkdir solidjs-webpack-ts-example
cd solidjs-webpack-ts-example
yarn初始化
➜ solidjs-webpack-ts-example git:(main) yarn init
yarn init v1.22.19
question name (solidjs-webpack-ts-example):
question version (1.0.0):
question description:
question entry point (index.js):
question repository url:
question author (w4ngzhen <w4ngzhen@hotmail.com>):
question license (MIT):
question private:
success Saved package.json
Done in 3.68s.
git初始化
# 前置:添加.gitignore文件
git init
git add .
git commit -m "init"
库安装
webpack 4件套
yarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin
样式处理 4件套
yarn add -D less less-loader css-loader mini-css-extract-plugin
less:less核心编译解析库;
less-loader:webpack与less的桥梁。当webpack处理less时,通过配置指定交给less-loader,less-loader调用安装的less,将less代码编译为css代码;
css-loader:wepback处理css样式代码的loader。处理css,或处理来自less编译成的css;
mini-css-extract-plugin:css样式处理最后一个环节,交给该插件的提供的loader、plugin完成独立样式文件打包生成。
babel 7件套
yarn add -D @babel/core
yarn add -D @babel/preset-env @babel/preset-typescript babel-preset-solid
yarn add -D @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread
yarn add -D babel-loader
- @babel/core:babel核心库;
- @babel/preset-env、@babel/preset-typescript、babel-preset-solid(这个preset名字目前没有符合babel规范):babel扩展preset,整合当前主流浏览器支持语法、typescript语法支持以及solidjs相关语法支持;
- @babel/plugin-proposal-class-properties、@babel/plugin-proposal-object-rest-spread:babel扩展插件,支持类定义属性以及
...
剩余属性解构语法; - 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)。
为了方便的进行类型检查,本样会安装项目级:
yarn add -D typescript
至此,我们安装了目前基础项目所需要的开发依赖(devDependencies)。
{
"name": "solidjs-webpack-ts-example",
"version": "1.0.0",
"main": "index.js",
"author": "w4ngzhen",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.21.3",
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/plugin-proposal-object-rest-spread": "^7.20.7",
"@babel/preset-env": "^7.20.2",
"@babel/preset-typescript": "^7.21.0",
"babel-loader": "^9.1.2",
"babel-preset-solid": "^1.6.13",
"css-loader": "^6.7.3",
"html-webpack-plugin": "^5.5.0",
"less": "^4.1.3",
"less-loader": "^11.1.0",
"mini-css-extract-plugin": "^2.7.5",
"typescript": "^5.0.2",
"webpack": "^5.76.2",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.13.1"
}
}
SolidJS 2件套
yarn add solid-js @solidjs/router
- solid-js:SolidJs核心库;
- @solidjs/router:solidjs官方SPA路由组件。
项目配置
tsconfig.json
项目根目录
{
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"noEmit": true,
"skipLibCheck": true,
"jsx": "preserve",
"jsxImportSource": "solid-js"
},
"include": [
"src"
]
}
webpack.config.js
项目根目录
const {resolve} = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
mode: "development",
entry: {
main: resolve(__dirname, 'src', 'index.tsx')
},
output: {
filename: "app.js",
path: resolve(__dirname, 'dist')
},
resolve: {
// webpack 默认只处理js、jsx等js代码
// 为了防止在import其他ts代码的时候,出现
// " Can't resolve 'xxx' "的错误,需要特别配置
extensions: ['.js', '.jsx', '.ts', '.tsx']
},
module: {
rules: [
{
test: /\.tsx?/,
use: [
'babel-loader'
],
exclude: /node_moudles/
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: resolve(__dirname, 'public', 'index.html'),
inject: 'body',
favicon: resolve(__dirname, 'public', 'favicon-32x32.png')
}),
new MiniCssExtractPlugin({
filename: 'app.css'
})
],
devServer: {
port: 8080
}
}
.babelrc
项目根目录
{
"presets": [
"@babel/preset-env",
"@babel/preset-typescript",
"babel-preset-solid"
],
"plugins": [
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-proposal-class-properties"
]
}
package.json
添加开发、构建以及类型检查脚本:
{
... ...
+ "scripts": {
+ "typecheck": "tsc",
+ "start": "webpack-dev-server --config webpack.config.js",
+ "build": "webpack --config webpack.config.js --mode=production"
+ },
... ...
}
初始文件创建
app.d.ts
路径:项目根目录/src/app.d.ts。涉及到譬如less模块在ts中使用的类型定义。
declare module '*.module.less' {
const content: {
[className: string]: any
}
export default content;
}
index.html
路径:项目根目录/public/index.html(主要是与webpack中的HtmlWebpackPlugin.template选项对应)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<title>SolidJS webpack ts example</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
PS:public目录还创建了一个icon,就不详细说明了。
index.tsx
路径:项目根目录/src/index.tsc
import {render} from 'solid-js/web';
import styles from './index.module.less';
function HelloWorld() {
return (
<div class={styles.hello}>
<p>Hello World!</p>
</div>
);
}
render(() => <HelloWorld/>, document.querySelector('#app')!)
index.module.less
路径:项目根目录/src/index.module.less
.hello {
p {
font-size: 16px;
color: #2c4f7c;
}
}
项目运行效果
附录
项目代码地址:
w4ngzhen/solidjs-webpack-ts-example (github.com)
基于webpack与TypeScript的SolidJS项目搭建的更多相关文章
- 关于自己配置有关webpack.config.js和vue项目搭建相关步骤
## Webpack的配置和使用 ### 安装 1. 全局安装 ``` npm install webpack -g ``` 2. 本地安装 ``` npm install webpack -D `` ...
- 基于idea的springcloud的helloworld项目搭建过程整理
Springcloud的搭建主要包括三个部分:服务注册中心.服务提供者.服务消费者.每一个部分都是一个springboot项目,它们通过配置文件(application.properties或appl ...
- 《React+Redux前端开发实战》笔记2:基于Webpack构建的Hello World案例(上)
这次搭建分为两部分:一部分是前期必要配置,一部分是开发React代码. [基于Webpack的React Hello World项目] 1.前期必要配置 (1)首先要确保读者的开发设备上已经安装过No ...
- 从零搭建基于webpack的Electron-Vue3项目(1)——基于webpack的Vue3项目搭建
从零搭建基于webpack的Electron-Vue3项目(1)--基于webpack的Vue3项目搭建 前言 本篇文章内容,主要是基于webpack的Vue3项目开发环境进行搭建,暂时还不涉及到El ...
- 基于webpack的react开发环境搭建新手教程
最近学习react-webpack项目搭建,找到一篇我认为不错的博客,跟着学习了一番,写得很详细很好,本篇博客纯属记录总结,要看更详细的搭建过程及解析,请戳: 基于webpack的React项目搭建( ...
- Vue2.5 Web App 项目搭建 (TypeScript版)
参考了几位同行的Blogs和StackOverflow上的许多问答,在原来的ng1加TypeScript以及Webpack的经验基础上,搭建了该项目,核心文件如下,供需要的人参考. package.j ...
- 基于 Webpack 4 搭建 Vue 开发环境
自从工作之后,就已经很久没有写过博客了.时间被分割得比较碎,积累了一段时间的学习成果,才写下了这篇博客. 之前有写过 Webpack4 的文章,但是都比较偏入门,唯一的一篇实战篇 -- 基于Webpa ...
- 基于webpack搭建vue-cli以及webstorm的设置
N1.检查本地电脑是否安装node和npm 安装vue-cli的前提是已经安装了npm 是否安装npm检查命令 npm -v 如果出现版本号,说明已经安装了npm 查看node版本号 node -v ...
- 解决基于TypeScript 的 RN项目相对路径引入组件的问题
一.前言 在开发RN项目时,经常会要使用这样的方式(../../../)来引入组件,感觉非常繁琐,如果项目结构层级比较多,引入的头部更加分不清. 那有没有一种方案和vue项目一样,经过配置后简写路径, ...
- 超简单的react和typescript和引入scss项目搭建流程
1.首先我们先创建一个react项目,react官网也有react项目搭建的命令 npx create-react-app my-app cd my-app 2.安装我们项目需要的样式依赖,这个项目我 ...
随机推荐
- 针对SpringBoot服务端返回的空对象和空数组问题
返回的Json会自动过滤掉空指针的对象,但是若遇到非空指针的没有任何内容的对象,举例如下: public class Person { private String name; private Int ...
- Linux通过fdisk或者parted进行磁盘分区,然后格式化和挂载磁盘
磁盘分区是Linux的常用命令,其中fdisk和parted命令最为常用.但是当磁盘大于2T时,fdisk只能分到2T. 比如4T的磁盘,fdisk只能分2T的主分区出来,parted可以直接分成4T ...
- Base64编码的优点与缺点
Base64编码是一种将二进制数据转换为可打印ASCII字符的编码方式.它被广泛应用于数据传输和存储,以提升数据的可读性.可传输性和安全性. Base64编码解码 | 一个覆盖广泛主题工具的高效在线平 ...
- P2898 [USACO08JAN] Haybale Guessing G 题解
题目传送门 前置知识 二分答案 | 并查集 解法 对条件的合法性判断其他题解已经讲得很明白了,这里不再赘述.这里主要讲一下用并查集实现黑白染色问题. 以下内容称被覆盖为黑色,不被覆盖为白色. 本题因为 ...
- NC16758 [NOIP2000]单词接龙
题目链接 题目 题目描述 单词接龙是一个与我们经常玩的成语接龙相类似的游戏,现在我们已知一组单词,且给定一个开头的字母,要求出以这个字母开头的最长的"龙"(每个单词都最多在&quo ...
- mysql 外键索引入门介绍,为什么工作中很少有人使用?
背景 以前工作学习中,一直被告诫不要使用外键,所以也没有仔细整理过. 这里记录一下笔记. 外键 是什么? MySQL 的外键(Foreign Key)是一种关系型数据库中用于建立表与表之间关联关系的重 ...
- springboot集成腾讯cos实现文件上传
腾讯对象存储介绍 对象存储(Cloud Object Storage,COS)是腾讯云提供的一种存储海量文件的分布式存储服务,具有高扩展性.低成本.可靠安全等优点.通过控制台.API.SDK 和工具等 ...
- Fpga开发笔记(二):高云FPGA发开发软件Gowin和高云fpga基本开发过程
前言 本篇安装高云的开发软件Gowin,并且描述了一个基于高云fpga的程序的开发环境和完整的下载运行过程. Gowin软件 概述 Gowin 软件是广东高云半导体股份有限公司的 FPGA ...
- pytho代码分析示例
a = 5 b = 6 c = 10 for i in range(n): for j in range(n): x = i * j y = j * j z = i * j for k in rang ...
- django中如果不是第一次迁移的时候就配置AUTH_USER_MODEL(用来告知django认证系统识别我们自定义的模型类),那么该如何解决才能让django的认证系统识别且不会报未知错误?
Django认证系统中提供的用户模型类及方法很方便,我们可以使用这个模型类,但是字段有些无法满足项目需求,如还需要保存用户的手机号,需要给模型类添加额外的字段. Django提供了django.con ...