V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
chieffo
V2EX  ›  Vue.js

Vite:下一代前端开发与构建工具?大伙使用效果如何?

  •  1
     
  •   chieffo · 2021-10-01 18:41:22 +08:00 · 7306 次点击
    这是一个创建于 1138 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我尝试转换了我个人的旧项目,切换成 Vite 后果然像尤雨溪说的,用了就回不去了哈哈~

    对旧项目进行转换到 Vite 项目时,搜索错误信息发现一个 GitHub 项目,它列出了一些转换项和错误修复方法,甚至可以一键转换旧项目到 Vite 项目,非常棒,推荐一下!

    项目地址: https://github.com/originjs/webpack-to-vite

    36 条回复    2021-10-08 17:27:41 +08:00
    zxCoder
        1
    zxCoder  
       2021-10-01 19:24:17 +08:00
    有时候会遇到一些奇怪的兼容问题,不过一般查到 github 都能找到解决方案
    catinsides
        2
    catinsides  
       2021-10-01 19:29:14 +08:00
    vue2 支持的不完美,jsx 报错搜不到解决方法。我用的就是官方推荐的 vue2 插件,按照说明文档配置也不好用。等别人把坑踩完了再考虑吧。
    chieffo
        3
    chieffo  
    OP
       2021-10-01 20:09:15 +08:00
    确实,vite 对 vue2 可能不太友好,毕竟官方想主推 vue3. 不过你这个 jsx 报错的问题我好像也遇到了,可以参考看看 https://github.com/originjs/webpack-to-vite/blob/main/README.md?plain=1#L227-L268
    chieffo
        4
    chieffo  
    OP
       2021-10-01 20:09:45 +08:00
    NodeSans
        5
    NodeSans  
       2021-10-01 20:53:00 +08:00
    感觉还是挺清爽的,而且速度快,就是今天用的时候不知道为什么 Vue devtools 说我这个项目不是 vue 项目,就很奇怪,其他都挺好的
    Trim21
        6
    Trim21  
       2021-10-01 21:00:35 +08:00 via Android
    学不动,还在用 webpack🐶
    afewok
        7
    afewok  
       2021-10-01 21:21:24 +08:00
    Vue 、Vite 是限制你们的深入的毒瘤啊
    uxstone
        8
    uxstone  
       2021-10-01 21:35:30 +08:00   ❤️ 1
    一句话,Vite 的易用性秒杀 create-react-app 。
    还折腾啥 Webpack 啊。
    chieffo
        9
    chieffo  
    OP
       2021-10-01 21:42:12 +08:00
    @Trim21 webpack 更学不动😂
    seakingii
        10
    seakingii  
       2021-10-01 21:51:37 +08:00
    用着还好,除了比较新,有些小问题,不好找答案.
    比 webpack 速度快
    neal2020
        11
    neal2020  
       2021-10-01 22:16:23 +08:00
    用了两个月了,真的很好用
    Geo200
        12
    Geo200  
       2021-10-01 22:27:21 +08:00 via Android
    @chieffo 最近也在做 vue2 的 jsx 兼容,发现 nodemodules 下的 jsx 解析死活有问题,被卡住了🙃
    creanme
        13
    creanme  
       2021-10-01 22:37:30 +08:00
    不太明白为啥 vite 选择用 rollup 打包,不选择打包走 webpack 那套
    sickoo
        14
    sickoo  
       2021-10-01 22:43:07 +08:00
    @afewok 实话。
    zhwithsweet
        15
    zhwithsweet  
       2021-10-01 23:15:17 +08:00 via iPhone
    snowpack 作者宣布考虑从 snowpack 转向 vite
    beginor
        16
    beginor  
       2021-10-01 23:42:40 +08:00 via Android
    @creanme webpack 打包的模块会依赖 webpack runtime, 而 rollup 打包出来的是原生 ES6 模块,无任何第三方依赖。
    flyhaozi
        17
    flyhaozi  
       2021-10-02 00:37:24 +08:00
    @zhwithsweet ??我的个人项目才刚从 @pika/web 转到 snowpack😂
    flyhaozi
        18
    flyhaozi  
       2021-10-02 01:16:52 +08:00
    @zhwithsweet 看到作者的这篇文章了,https://dev.to/fredkschott/5-more-things-i-learned-building-snowpack-to-20-000-stars-5dc9
    维护这么大一个开源项目是真的不容易,下载量开始减慢,贡献者不足,所以我也去试试 vite [
    wanacry
        19
    wanacry  
       2021-10-02 02:13:52 +08:00 via iPhone
    娱乐圈又开始了
    anguiao
        20
    anguiao  
       2021-10-02 10:06:39 +08:00
    @afewok
    不是人人都需要所谓的“深入”。
    对很多人来说,繁杂的配置除了平添复杂度、提高门槛以外,没有任何意义。
    你想深入可以等有更复杂的需求了再深入学习,而不是一开始就把本应该简单的事情复杂化。
    catinsides
        21
    catinsides  
       2021-10-02 11:01:58 +08:00
    @chieffo #3
    我从 github 找了一个别人的 vite vue2 项目测试了一下是好用的,等开工了我再试试自己的项目。
    简单总结一下,方便以后搜索到的人:
    1. npm i -D @vitejs/plugin-vue-jsx
    2. 包含 jsx 的文件要标注<script lang="jsx"></script>
    3. babel.config.js 内的配置改为 presets: [['@vue/babel-preset-jsx']],
    EPr2hh6LADQWqRVH
        22
    EPr2hh6LADQWqRVH  
       2021-10-02 11:09:39 +08:00   ❤️ 4
    对于纯前端是可以的。

    纯前端,也称尤雨溪的前端: 别涉及 Electron,别涉及 Node.js ,别想放在别的小众 js runtime 里面跑。

    Ts 别涉及 DecoratorMetadata,别玩依赖注入,Angular 无缘。
    chieffo
        23
    chieffo  
    OP
       2021-10-02 12:10:03 +08:00
    @Geo200 试试在我上面提到的 GitHub 仓库提个 issue 问问?我之前遇到的 jsx 问题也是靠他们解决的 : )

    @afewok 同意 @anguiao 的说法,你想“深入”没有什么工具能阻止你,需要的时候你自然会想办法“深入”,而简单的工具产生的收益比所谓的“深入”有价值多了

    @flyhaozi snowpack 作者都放弃维护,转向 vite 了:At the same time, Vite (that Snowpack alternative that now powers SvelteKit) is taking off. https://segmentfault.com/a/1190000040722202

    @catinsides #21 有用就好,这些坑确实比较麻烦,得参考别人的踩坑经验 lol

    @avastms 目前来看是这样了,老哥理解到位
    CrispElite
        24
    CrispElite  
       2021-10-02 12:36:36 +08:00
    大家追 vite 的样子好像当时追 webpack 的样子 🐶
    makelove
        25
    makelove  
       2021-10-02 13:29:18 +08:00
    @avastms 啥叫纯前端? NodeJS 为什么要用 Vite 打包?我前端用 Vite,后端用 tsc,想不出后端也要 Vite 的必要性
    mikulch
        26
    mikulch  
       2021-10-02 13:56:53 +08:00
    前端又变天了?
    cweijan
        27
    cweijan  
       2021-10-02 17:27:21 +08:00
    写 Vue3 不错, 启动很快
    DiamondYuan
        28
    DiamondYuan  
       2021-10-02 22:35:48 +08:00
    @avastms 不敢苟同

    1. Node.js 和 Electron 可以使用 ts-node + rollup,前端部分使用 vite 。

    + 开发时使用 ts-node 实现 Node.js 和 Electron 无 bundle 开发
    + 生产构建可以用 rollup 打包 elec 。Vite 和 rollup 可以共享配置和插件 (例如 minify 插件。

    2. 我是纯 ts 项目、开启了 emitDecoratorMetadata 、experimentalDecorators,并没有遇到任何问题。 依赖注入是从 vs code 源码拷贝的,也没有任何问题。
    chieffo
        29
    chieffo  
    OP
       2021-10-03 10:07:55 +08:00
    @cweijan Vue3 + Vite 真香
    rodrick
        30
    rodrick  
       2021-10-03 10:31:44 +08:00
    很好用 之前旧的 react 项目转 vite 在 antd 上碰到了一些坑 是生产打包和 dev 不同表现的情况 后来 githubc 查查也是能查到的 总体还是很香的
    Opportunity
        31
    Opportunity  
       2021-10-03 13:40:46 +08:00
    @DiamondYuan vite 不是用的 esbuild ?我看 esbuild 文档说不支持这些,我都没再试了。。
    EPr2hh6LADQWqRVH
        32
    EPr2hh6LADQWqRVH  
       2021-10-03 14:11:46 +08:00 via Android
    @DiamondYuan 那说明你根本没用到 DecoratorMetadata
    ccyu220
        33
    ccyu220  
       2021-10-05 10:39:08 +08:00
    @avastms 哇! DecoratorMetadata,『装饰器』好高端啊
    uni
        34
    uni  
       2021-10-05 17:11:44 +08:00
    @NodeSans 要用 beta 版的 devtool 才行,跟现在 stable 版的暂时还不兼容
    NodeSans
        35
    NodeSans  
       2021-10-08 08:29:07 +08:00
    @uni 了解了,谢谢
    SmiteChow
        36
    SmiteChow  
       2021-10-08 17:27:41 +08:00
    没用过,但我知道下一代一定不是它,而是进化中的现代浏览器,目前浏览器已经原生支持 html/css/js module 了,私有项目我都不用打包工具了。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1094 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 22:42 · PVG 06:42 · LAX 14:42 · JFK 17:42
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.