全网首发尝试使用 Rspack 构建一个Vue3基本开发框架(一)
Rspack2.0发布也有一段时间了,官方也对Vue进行了适配和支持,昨天看了开发者大会上web-infra成员对rspack进行了详细介绍和一些问题解答,笔者心血来潮就想尝试一下rspack好不好用。那么我们尝试用Vue来搭建一个简单的框架,本文章只涉及Rspack相关的一些插件配置和使用,像vue-router、vue-use、组件封装这些业务代码就不过多展开说了。这估计是掘金全网第一篇使用Rspack搭建Vue开发环境的文章了,如有错误可以在评论区支持,有争议的地方也可以在评论区友好讨论,那么废话不多说,直接开始折腾!
起步
首先我们根据官方文档的流程,用repack的cli创建一个简单的模板:
pnpm create rspack@latest
选择vue框架
cd your-project
pnpm i
pnpm dev
看到控制台打印出了启动地址,打开就能看到最简单的demo了。
配置插件
接下来会展示安装一些vue3最基础和进阶用到的一些插件,分别是:
- unplugin-auto-import: 按需自动import插件
- unplugin-vue-components:按需自动import并注册组件插件
- unocss、less、sass:css相关
- unplugin-icons:icon插件
还有一些进阶配置:
- TypeScript: 使用类型检查让你的代码变的更健壮吧!
- Eslint:配合静态检查和代码规范继续增强你的代码!
unplugin-auto-import和unplugin-vue-components安装
首先执行:
pnpm add -D unplugin-auto-import unplugin-vue-components
在rspack.config.js使用这两个插件:
const { VueLoaderPlugin } = require("vue-loader");
const config = {
...
plugins: [
new VueLoaderPlugin(),
require("unplugin-vue-components/rspack")(),
require("unplugin-auto-import/rspack")({
imports: ["vue"],
dirs: ["./src/hooks/**"],
}),
],
...
};
module.exports = config;
为了尝试使用auto-import,我们先在src目录下创建一个hooks目录,并创建useCount.js,这里我直接复制vueuse里的useCounter代码来展示
import { ref } from "vue";
export function useCounter(initialValue = 0, options = {}) {
const count = ref(initialValue);
const { max = Infinity, min = -Infinity } = options;
const inc = (delta = 1) => (count.value = Math.min(max, count.value + delta));
const dec = (delta = 1) => (count.value = Math.max(min, count.value - delta));
const get = () => count.value;
const set = (val) => (count.value = Math.max(min, Math.min(max, val)));
const reset = (val = initialValue) => {
initialValue = val;
return set(val);
};
return { count, inc, dec, get, set, reset };
}
为了试探auto-import有没有生效,我们打开 components/HelloWorld.vue
,修改script部分:
<script setup>
defineProps({
msg: String,
});
const { count } = useCount(0);
</script>
然后再打开一次,发现......并没有生效,折腾了一遍发现,unplugin对rspask的支持有问题,笔者已经在给作者提pr解决了,(´-﹏-`;)
这段代码在vite、webpack的环境下是能正常运行的,在rspack里面因为漏掉了一段代码导致没有扫描到我们的src/hook文件夹,所以这里我们先改成使用vue的ref吧,然后等待托尼老师合并pr解决这个问题。
<script setup>
defineProps({
msg: String,
});
const { count } = ref(0);
</script>
rspack的热更新好像有点问题,需要退出再重启启动,再次启动就能发现正常运行了。
然后就是unplugin-auto-import
的使用了,也是很简单,默认配置下,插件会扫描我们的src/components目录,放在这个目录下的组件都能自动按需引入和注册,那么我们来改一下App.vue文件:
<script setup>
// 去掉import HelloWorld from "./components/HelloWorld.vue";
let title = "Rspack + Vue";
</script>
其实我们components目录下的组件不一定要放在components根目录下,也可以类似:src/components/business/MyTabel.vue
或者src/components/MyTabel/index.vue
又或者src/components/business/MyTabel/index.vue
这样都能识别到我们的MyTabel组件,然后可以直接:<my-tabel />
这样使用
然后看一眼我们的页面和控制台,没有任何问题,很nice。
unocss、less、sass
关于原子化CSS,这个框架争议性比较大,这里仅代表笔者的观点说明一下,原子化css能给我们带来的好处:
- 开发更便捷
- 不需要一个class名想半天
- 不会被同事的class名和css代码恶心到
- 配合iconify强大的图标库,更方便的使用图标
- 直接加载本地svg文件,不再需要别的插件(也可以使用unplugin-icons)
所以笔者本人是强力推荐使用的,但是肯定会有小伙伴说:啊,原子化css就是个辣鸡,写个样式还需要背这么多规则,而且很丑。
至于规则嘛,刚开始我也是打开tailwind的文档再开始写代码,不懂的规则就去查一下,写了一两天之后基本上能把不看文档写了(这叫熟能生巧)
至于丑吗,可以开启属性模式,有一定的改善。
当然用不用肯定也是取决于大家的看法,萝卜青菜各有所爱。
less、sass
因为rspack内置了对css的支持,所以如果你想要用less还是sass,只需要安装对应的loader就行了,一般项目只需要用到一个,这里为了方便演示就装两个吧:
pnpm add -D less-loader sass-loader sass less
修改rspack.config.js:
const { VueLoaderPlugin } = require("vue-loader");
const config = {
...
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader",
options: {
experimentalInlineMatchResource: true,
},
},
{
test: /\.svg/,
type: "asset/resource",
},
{
test: /\.less$/,
loader: "less-loader",
type: "css",
},
{
test: /\.scss$/,
loader: "sass-loader",
type: "css",
},
],
},
...
};
module.exports = config;
然后我们将App.vue的style代码改一下:
<style scoped lang="scss">
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
&vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
&:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
}
</style>
嗯,完美支持,需要less的话就将lang改成less就行了。
unocss
笔者尝试了用unocss/webpack的插件去调试,发现好像是用不了,我也尝试了将这个webpack的插件改成rspack的插件,但是官方好像并没有发布rspack-source这个包到npm,所以没办法简单的复制粘贴修改,所以暂时可能用不了......(´-﹏-`;)
unplugin-icons
既然用不了unocss的icon,那么就试试用unplugin-icons去展示icon。
经过一番折腾,好像还是用不了,unplugin-icons是用resolveId这个hook去支持虚拟模块,在webpack这边是使用一个社区的webpack-virtual-modules
包去支持虚拟模块,但是rspack社区还没有,那还是用不了,寄!
折腾了一个上午,发现好像社区确实不是很完善,web-infra团队要加油努力了!typescript和eslint还是留到下一篇吧。
转载自:https://juejin.cn/post/7250503852817121340