h1{color:red}构建工具是开发人员工作流程中不可或缺的一部分，单页应用程序(SPA)和现代JavaScript(ES6)的兴起见证了JavaScript构建工具的激增。术语“构建工具”用于描述使用包、工具、库和预设模板自动执行简单、重复任务的过程。构建工具包括各种工具，例如：任务执行转换器模块打包Lint包管理开发服务器脚手架工具这些工具帮助开发者高效构建，让开发过程更顺畅。在本文中，我将比较Vue.js生态系统中用于高效构建项目的脚手架构建工具、它们提供的功能、它们如何改进您的开发工作流程以及如何开始使用它们。1.先决条件本教程假设读者具备以下条件：安装Node.js10x或更高版本Yarn或NPM基本的JavaScript知识以及框架的工作原理Vue.js的基本知识2.脚手架工具脚手架工具建立在一些构建之上在此之上的工具抽象，最著名的是开发服务器/模块捆绑器，它消除了配置和使用构建工具的麻烦。脚手架工具可以帮你动态引导你创建新项目，你不用担心配置问题。脚手架工具还包括项目的配置选项、为未来项目保存配置预设的能力，以及升级使用它们构建的项目的依赖项的机制。Vue社区中可用于我们将比较的脚手架应用程序和库的工具是：ViteVueCLIPoiBili3。什么是维特？Vite最初只是作为Vue单文件组件(SFC)的开发服务器，是一种利用原生ES模块导入的非捆绑式JavaScript开发服务器。create-vite-app是用于启动新的Vite项目的模板，使用create-vit-app，你不必安装Vue包，因为它作为默认启动器与Vue捆绑在一起，你可以安装其他的依赖项应用程序。create-vite-app还支持React和Preact等其他框架。要使用的模板也可以使用--template标志进行配置。重要的是要注意，Vite仍处于试验阶段，并且正在努力使其适合生产。在它变得稳定之前，最好不要在关键项目上使用它。Vite尚不向后兼容，因此它不支持Vue2以外的任何其他Vue.js版本。Vite包括一个令人难以置信的快速热模块替换(HMR)，对文件的更改几乎立即反映在浏览器中，它还具有对TypeScript、.tsx和.jsx文件的开箱即用支持，使用esbuild移植、CSS预处理器、PostCSS和CSS模块。Vite的其他特性包括：资产URL处理支持CSS预处理器，PostCSS和CSS模块支持模式选项和环境变量在项目的根目录或当前工作目录中使用vite.config.js或vite.config.ts文件扩展名默认支持插件支持自定义文件转换你可以在这里阅读更多关于Vite的信息。4.什么是VueCLI？VueCLI是用于在Webpack上构建项目的官方Vue.js脚手架工具，它使开发人员免于为他们的项目配置和设置构建过程的麻烦。它提供了一个有组织的代码结构并帮助您选择应用程序中所需的工具，同时它负责配置并让您专注于编写为您的项目提供支持的代码。它还具有对Babel、TypeScript、ESLint、PostCSS和CSS预处理器、渐进式Web应用程序(PWA)、单元测试和端到端测试的开箱即用支持。它还具有可扩展的基于插件的架构，允许开发人员构建、共享和使用插件来解决特定问题。您还可以在项目的脚手架过程中使用VueRouter添加路由，使用Vuex添加状态管理，并开箱即用地使用热模块替换(HMR)。其他一些值得注意的功能包括：支持模式和环境变量使用vue.config.js或vue.config.ts配置文件修改默认的webpack配置以实现可扩展性。面向喜欢使用GUI的开发人员的图形用户界面5.什么是Poi？Poi是一个构建在webpack之上的零配置打包器。它旨在通过使用预配置的预设，使使用webpack开发和捆绑应用程序变得尽可能简单。Poi与框架无关，可以与任何JavaScript框架一起使用。Poi通过减少和操纵代码来优化性能并加快应用程序加载。Poi更适合构建Web应用。CreatePoiApp是一个用于交互式创建新Poi项目的脚手架工具。Poi提供了极佳的开发体验，还提供了使用配置文件扩展应用程序的选项。它还具有一些值得注意的功能，例如：开箱即用地支持JS、CSS、文件资产等。Poi与框架无关支持JSX、Vue等。无需配置使用插件扩展功能6.什么是碧丽？Bili在其官方文档中被描述为一个令人愉快的库打包器。Bili是Poi的Rollup替代品。它是一个基于Rollup的零配置打包器。它使开发设置变得轻而易举。它比Web应用程序更适合构建库。Bili帮助库作者将库打包成JavaScript格式，例如CommonJS、UMD和ES模块。注意：Bili没有CLI交互式shell。该工具同时提供命令行和Node.jsAPI，因此开发人员可以选择最适合他们用例的API，并且它是面向未来的，因为它是使用babel-preset-env和babel-preset-typescript从Babel移植而来的，所以你可以自由地使用现代JavaScript特性，它的一些特性，正如它在其文档中所说，包括：快速，默认为零配置使用RollupunderthehoodautomaticallyusesBuble/Babel/TypeScriptConvertJSfiles内置支持CSS，Sass、Stylus、Less、CSS模块使用Rollup插件扩展功能友好的错误日志体验WritteninTypeScript，自动生成API文档7.安装使用7.1VueCLI开始使用VueCLI工具，使用一个安装CLI工具以下命令：npminstall-g@vue/cli#ORyarnglobaladd@vue/cli全局安装CLI包后，我们可以在终端访问vue命令，vuecreate命令可以帮助我们创建一个新项目.接下来，使用vuecreate命令创建一个新项目：vuecreatetesting-vue-cli我使用名称“testing-vue-cli”作为本教程的项目名称，但您可以使用您认为合适的任何名称。运行此命令将为您提供交互式脚手架体验，您可以在其中选择应用程序所需的包，还可以决定将配置保存为预设以供将来项目使用。接下来，将目录更改为您的项目文件夹：cdtesting-vue-cli通过运行这些命令之一来为您的应用程序提供服务。yarnserve#ornpmrunserve运行以下命令后，您的应用程序应该默认运行在http://localhost:8080上：7.2Vite运行以下命令使用模板创建一个新的Vite应用程序：npxcreate-vite-apptesting-vite#ORyarncreatevite-apptesting-vite现在，使用以下命令进入创建的项目目录：cdtesting-vite并继续安装项目正常运行所需的必要包：npminstall#ORyarn然后，您可以通过运行以下命令在浏览器中启动开发服务器：npmrundev#ORyarndevbootstrap对于你的项目，请先安装Poi应用CLI工具：yarnglobaladdcreate-poi-app#ORnpmi-gcreate-poi-app这条命令使creat-poi-app全局可用，现在你可以使用cpa命令创建一个新项目。使用以下命令创建一个新项目：cpatesting-poi运行此命令将为您提供一个shell，您可以在其中决定将哪些工具包含在您的项目中。接下来，使用以下命令进入你的项目目录：cdtesting-poi继续安装Vue，同时安装Vue模板编译器。作为开发依赖，Vue模板编译器将模板编译成渲染函数。yarnaddvue&&yarnaddvue-template-compiler--dev打开位于src资源管理器中的index.js文件并添加以下内容：importVuefrom'vue'importAppfrom'./App.vue'newVue({el:"#app",渲染:h=>h(App)});接下来，在src文件夹中创建一个App.vue文件并添加以下内容：:yarndev运行开发命令后，你应该在http://localhost:4000上得到这样的结果运行结果：7.4Bili要使用Bili引导你的Vue项目，首先为项目创建一个新目录：mkdirtesting-bili更改工作目录到创建的文件夹：cdtesting-bili然后使用以下命令在目录中初始化一个新的package.json文件：npminit-yorusingYarnyarninit-y接下来，安装Bili作为开发依赖：yarnaddbili--dev接下来，安装Vue和Vue模板编译器：yarnaddvue&&yarnaddvue-template-compiler--dev通过将package.json中的main值替换为以下内容，将入口文件添加到项目中：“main”:"./dist/index.js",接下来安装Vue的Rollup插件，这样单文件组件就可以be与Bili捆绑：yarnaddrollup-plugin-vue@5.1.5然后配置你的npm脚本以使用Bili运行你的项目，将以下内容添加到package.json文件中In:"scripts":{"build":"biliApp.vue--plugin.vue"}，接下来，创建一个App.vue文件并添加以下内容：hello
h1{color:red}接下来，创建一个bili.config.js文件并添加以下代码：constvue=require('rollup-plugin-vue');module.exports={input:'App.vue',format:['umd-min'],plugins:{vue:true},outDir:'dist'}然后，您可以使用以下命令构建项目：yarnbuild编译后的文件应该位于项目的dist文件夹Medium8.易用性和插件VueCLI的优势之一是范围广泛的插件几乎可用于任何目的，这使得使用第三方插件或通过建立你自己的。虽然四个库的构建可以达到几乎相似的效果，但是VueCLI和Poi的文档几乎是同一个标准，而Vite目前还没有完整的文档。Vite仍在积极开发中，人们需要阅读库代码库中的文档部分才能执行一些高级操作。另一方面，Bili的文档非常简单，尝试在Vue项目中使用它的新用户可能会感到困惑（就像我在阅读它时一样）并遇到错误。VueCLI是Vue.js团队推荐的工具，使其成为许多开发人员的默认选择。9.CommunityVite，尽管是一个相对较新的库，但已经积累了9.1kstars，被755个存储库使用，它还有54个贡献者，它在NPM上的每周下载量为5863。Poi在GitHub上有5kstars，57个贡献者在GitHub，以及在NPM上每周1,760次下载：VueCLI在NPM上的统计数据最高，每周下载量为24,236次，它也被40多个10,000多个存储库使用，它有370名贡献者，在GitHub上有25.9颗星。哔哩哔哩在GitHub上管理着878颗星，被1529个仓库使用，并有20个仓库的贡献者。总结在本文中，我们了解了在用于引导Vue项目的四个出色构建工具中脱颖而出的一些功能。VueCLI是许多开发人员的默认选择，因为它使引导和管理项目变得轻而易举，而且它的功能也可以通过插件轻松扩展。VueCLI还具有比任何其他脚手架项目工具更多的功能。我们今天看到的四种脚手架工具相似，只有一些基本差异，主要是自定义选项和使用它们的无缝性。虽然Vite仍处于试验阶段，但我们可以看到它如何反映VueCLI的无缝性（均由同一个人构建）。你更喜欢哪一个？为什么？在评论部分让我知道您的想法，或者您希望我进行的任何其他比较。首发于公众号：《前端全栈开发者》
