搭建vue3.0企业级前端脚手架的一些思考

哈库拉马塔塔
932 阅读4分钟

需求背景

目前我们在进行vue3.0UI框架开发，已经开发完了前端组件库。还需要搭建一套脚手架，让用户可以快速安装并运行我们的框架代码。

前期调研

  • vue2.0版本 image.png 因为vue2.0官方推荐使用vue-cli来进行安装的。所以我们2.0版本的脚手架是基于vue-cli来进行开发的插件 vue-cli插件开发指南。
    需要用户进行手动安装vue-cli，然后通过vue create <project>的方式先创建项目，然后通过vue add <package>的方式来添加包依赖。
    vue-cli是基于Webpack来构建的
    image.png

  • vue3.0版本 image.png 由于vue3.0，尤大和webpack分道扬镳，整出了一套vite。所以他弃用了之前的vue-cli方式进行项目初始化。官方推荐使用npm init <package>的方式来进行项目创建。

image.png npm init vue@latest 其实就是在 npm exec create-vue。npm exec命令是执行远程脚本，它于npx命令很像。

思考

由于vue3.0不支持了vue-cli，但是vue add命令依然可以被执行。如果我们需要进行一些依赖安装、模板复制等操作依然可以是由vue-cli来进行。但是对于vue.config.js的修改操作已经不能用了,因为新的vue使用的是vite.config.ts 之前同事在vite下提过isSure去问vite是否会出一套类似于vue-cli的脚手架解决方案，但是官方回复是vite不考虑去做这件事，因为与他们的理念不符(不知道他是啥理念)。
所以摆在我们面前的路就两条：

  1. 继续是由vue-cli，只对对于vue.config.js部分进行修改。
  2. 完全弃用vue-cli，使用自研方式，基于node原生能力自己搞一套出来。

基于vue3.0开始就已经不支持webpack了，所以我们考虑根据官方建议，弃用vue-cli。如果后期官方提供了标准解决方案，我们可以平行迁移过去。
image.png

开发前准备

目前的前端脚手架基本只需要提供template复制，以及package.json修改、包依赖安装、文件读写等能力。 所以需要整理出公共的utils工具包进行相关操作。所以整体项目架构大概如下

image.png

image.png

#! /usr/bin/env node
const program = require('commander');  //命令行开发工具
const vueCliPluginAxios = require('../command/vue-cli-plugin-axios')
program
    .version('0.0.1', '-v, --version')
    .command('list')
    .description('查看所有可用的项目模板')
    .action(() => {
        console.log(`
            vue-cli-plugin-axios        axios请求模板
            vue-cli-plugin-commitlint   commitlint提交模板
            vue-cli-plugin-sso      sso单点登录模板
        `)
    })
program
    .command('add <template>')
    .description('添加模板工程')
    .action((templateName, options) => {
        switch (templateName) {
            // 安装axios模板
            case 'vue-cli-plugin-axios':
                vueCliPluginAxios(templateName)
                break;
            default:
                break;
        }
    })
program.parse(process.argv)

大致通过命令去区分包 通过add <templateName>来操作，后期考虑添加init命令，然后通过inquirer来询问用户，让用户选择需要安装的模板，避免多次执行add命令。

对于文档系统的选择，目前我使用了vitePress，之前在组件库开发中，因为参考element-plus，第一次使用了vitePress，被坑的不要不要的。但是感觉他在搭建简易的文档系统还是好用的，至于为什么不用vuePress也是因为跟着官方走，毕竟vitePress还在马不停蹄的迭代，上个月还是alpha.4版本，现在已经是alpha.9版本了。

npm init的应用

vue3.0官方文档使用了npm init vue@latest来安装，其实就是执行了npm exec create-vue。这样的好处在于，不需要像vue-cli一样，先需要npm install vue-cli -g全局安装到本地，然后再去执行vue create <projectName>。npm exec可以去代码仓库找到对应项目，并执行项目命令，用户使用成本大大降低。
一开始我还怕npm init会去新建文件夹，并初始化package.json等操作。后来亲测 可以直接使用npm init <packageName> add <templateName>进行远程安装。但是这里要注意一点，

npm仓库的包名一定要create-开头。

结语

目前vue3.0的脚手架，大家应该都是刚刚动手搞，没有统一的标准，如果发现我的这一套解决方案有问题，可以互相学习一下。好了，项目搭完了，我要去搬砖了。

avatar
文章
阅读
粉丝