Build tools are an integral part of the developer’s workflow, and the rise of single-page applications (SPA) and modern JavaScript (ES6) has led to a proliferation of JavaScript build tools.

The term “build tool” is used to describe the process of automating simple repetitive tasks using packages, tools, libraries, and preset templates.

Build tools include a variety of different tools, such as:

  • Task execution
  • converter
  • Module packaging
  • Lint
  • Package management
  • Development server
  • Scaffolding tool

These tools help developers build efficiently and make the development process smoother.

In this article, I compare the scaffolding build tools available in the vue.js ecosystem for building projects efficiently, what they offer, how they improve the development workflow, and how to get started using them.

1. Prerequisites

This tutorial assumes the following:

  • Node.js 10x or later
  • Yarn or NPM has been installed
  • JavaScript basics and how does the framework work
  • The basics of vue.js

2. Scaffolding tools

Scaffolding tools are abstractions built on top of a number of build tools, most notably development server/module bundlers, that eliminate the hassle of configuring and using build tools.

Scaffolding tools can help guide you dynamically to create new projects without worrying about configuration issues.

Scaffolding tools also include configuration options for projects, the ability to save configuration presets for future projects, and mechanisms to upgrade project dependencies built using them.

The tools available for scaffolding applications and libraries in the Vue community that we will compare are:

  • Vite
  • Vue CLI
  • Poi
  • Bili

3. What is Vite?

Vite, originally intended as a development server for Vue single file Components (SFC), is an unbundled JavaScript development server imported with native ES modules.

Create-levit-app is a template used to boot new Vite projects. With create-levit-app, you don’t have to install the Vue package because it comes bundled with Vue as the default launcher, and you can install dependencies for other apps. Create-viet-app also supports other frameworks, such as React and Preact. You can also configure the template to use using the -template flag.

It is important to note that Vite is still in the experimental stage and efforts are being made to make it suitable for production. It is best not to use it on critical projects until it is stable.

Vite is also not backward compatible, so it does not support any version of vue.js other than Vue 2.

Vite includes an incredibly fast hot module replacement (HMR), your file changes are reflected almost immediately in the browser, it also has out-of-box support for TypeScript,.tsx and.jsx files, porting using ESbuild, CSS preprocessors, PostCSS and CSS modules.

Other features of Vite include:

  • Asset URL processing
  • Supports CSS preprocessors, PostCSS, and CSS modules
  • Support for mode options and environment variables
  • In the base/root directory of the project or in the current working directoryvite.config.js 或 vite.config.tsDefault value for file extension
  • Support plugins
  • Support custom file conversion

You can read more about Vite here.

4. What is Vue CLI?

Vue CLI is the official vue.js scaffolding tool for projects built on Webpack, which saves developers the hassle of configuring and setting up the build process for projects. It provides an organized code structure and helps you choose the tools you need in your application, while it takes care of configuration and lets you focus on writing the code that supports your project.

It also has off-the-shelf support for Babel, TypeScript, ESLint, PostCSS, and CSS preprocessors, progressive Web applications (PWA), unit testing, and end-to-end testing. It also has a plug-in based extensible architecture that allows developers to build, share, and use plug-ins to solve specific problems.

You can also use Vue Router to add routing during project scaffolding, Vuex to add state management, and hot module replacement (HMR) right out of the box. Some other notable features are:

  • Support for patterns and environment variables
  • usevue.config.js 或 vue.config.tsConfiguration file to modify the default WebPack configuration for extensibility.
  • A graphical user interface for developers who like to use guIs

5. What is a Poi?

Poi is a zero-configuration bundle built on top of WebPack, which aims to make webPack development and bundle applications as easy as possible by using preconfigured presets. The Poi is framework-agnostic and can be used with any JavaScript framework. Poi optimizes performance and speeds up application loading by reducing and processing code.

Pois are better suited for building Web applications.

Create Poi App is a scaffolding tool for creating new Poi projects interactively.

The Poi provides a good development experience, as well as an option to extend the application with configuration files.

It also has some notable features, such as:

  • Off-the-shelf support for JS, CSS, file assets, etc
  • The Poi is independent of the framework
  • It supports JSX, Vue and so on without configuration
  • Use plug-ins to extend functionality

6. What is Bili?

Bili is described in its official documentation as a delightful library bundler.

Bili is a Rollup alternative to Poi, a zero-configuration bundler built on top of Rollup that makes development Settings a breeze and is better suited for building libraries than Web applications.

Bili helps library authors bundle libraries into JavaScript formats such as CommonJS, UMD, and ES modules.

Note: Bili has no CLI interactive shell.

The tool provides both the command line and the Node.js API, so developers can choose what works best for their use case. It is future-oriented, as it is ported by Babel using babel-env and babel-preset-typescript, So you’re free to use modern JavaScript features, and some of its features, as stated in its documentation, include:

  • Fast, zero configuration by default
  • Use Rollup under the “hood”
  • Automatically convert JS files using Buble/Babel/TypeScript
  • Built-in support for CSS, Sass, Stylus, Less, and CSS modules
  • Extend functionality with the Rollup plug-in
  • Friendly error logging experience
  • Automatic API documentation written in TypeScript

7. Installation and use

7.1 the Vue CLI

To start using the Vue CLI tool, use one of the following commands to install the CLI tool:

npm install -g @vue/cli
# OR
yarn global add @vue/cli
Copy the code

After installing the CLI package globally, we can access the vue command in the terminal, and the vue create command can help us create a new project.

Next, create a new project using the vue create command:

vue create testing-vue-cli
Copy the code

I used the name “testing-vue-cli” as the project name for this tutorial, but you can use whatever you think is appropriate instead.

Running this command gives you an interactive scaffolding experience, you can select the package you need for your application, and you can also decide to save the configuration as a preset for future projects.

Next, change the directory to your project folder:

cd testing-vue-cli
Copy the code

Service your application by running one of these commands.

yarn serve
# or
npm run serve
Copy the code

Your app should run on http://localhost:8080 by default after running the following command:

7.2 Vite

Run the following command to create a new Vite application using the template:

npx create-vite-app testing-vite
# OR
yarn create vite-app testing-vite
Copy the code

Now, use the following command to go to the project directory you created:

cd testing-vite
Copy the code

Then proceed to install the necessary packages for our project to run properly:

npm install
# OR
yarn
Copy the code

You can then start the development server in your browser by running the following command:

npm run dev
# OR
yarn dev
Copy the code

After running the dev command, you should get something like this at http://localhost:3000:

7.3 Creating Poi Applications

To start booting your project with Poi, first install the CLI tool for creating Poi applications:

yarn global add create-poi-app    
# OR
npm i -g create-poi-app
Copy the code

This command makes creat-poi-app available globally, now you can use the CPA command to create new projects.

Create a new project with the following command:

cpa testing-poi
Copy the code

Running this command will give you a shell and you can decide which tools to include in your project.

Next, use the following command to go to your project directory:

cd testing-poi
Copy the code

To continue installing Vue, also install the Vue template compiler, which compiles templates into rendering functions as a development dependency.

yarn add vue && yarn add vue-template-compiler --dev
Copy the code

Open the index.js file in SRC Explorer and add the following:

import Vue from 'vue'
import App from './App.vue'
new Vue({
  el: "#app".render: h= > h( App )
});
Copy the code

Next, create an app.vue file in the SRC folder and add the following:

<template>
  <div id="app">
   helloooo
  </div>
</template>
Copy the code

You can now run the development server in a browser by running the following command:

yarn dev
Copy the code

After running the development command, you should get something like this at http://localhost:4000:

7.4 Bili

To bootstrap your Vue project using Bili, first create a new directory for the project:

mkdir testing-bili
Copy the code

Change the working directory to the created folder:

cd testing-bili
Copy the code

Then initialize a new package.json file in the directory with the following command:

npm init -y
or using Yarn
yarn init -y
Copy the code

Next, install Bili as a development dependency:

yarn add bili --dev
Copy the code

Next, install the Vue and Vue template compiler:

yarn add vue && yarn add vue-template-compiler --dev
Copy the code

Add an entry file to your project by replacing the value of main in package.json with the following:

"main": "./dist/index.js".Copy the code

Next, install the Rollup plugin for Vue so that you can bundle individual file components with Bili:

Yarn add [email protected]Copy the code

Then configure your NPM script to run your project using Bili by adding the following to the package.json file:

"scripts": {
  "build": "bili App.vue --plugin.vue"
},
Copy the code

Next, create an app.vue file and add the following:

<template>
  <h1>hello</h1>
</template>
<script>
export default {
  name: 'App'
}
</script>
<! -- let's add some style too :) -->
<style scoped>
h1 {
  color: red
}
</style>
Copy the code

Next, create a bili.config.js file and add the following code:

const vue = require('rollup-plugin-vue');
module.exports = {
  input: 'App.vue'.format: ['umd-min'].plugins: {
    vue: true
  },
  outDir: 'dist'
}
Copy the code

You can then build the project using the following command:

yarn build
Copy the code

The compiled files should be located in the dist folder of your project.

8. Ease of use and plug-ins

One of the advantages of the Vue CLI is that it has a wide range of plug-ins that can be used for almost any purpose, which makes it easy to extend the functionality of your project using third-party plug-ins or by building your own.

While all four libraries are built to achieve almost similar results, the DOCUMENTATION for Vue CLI and Poi is almost identical, while Vite is not yet fully documented. Vite is still under active development, and people need to read the documentation section of the library’s code base to perform some advanced operations. Bili’s documentation, on the other hand, is naked, and a new user trying to use it in a Vue project might get confused (as I did when I read it) and encounter errors.

The Vue CLI is the tool recommended by the vue.js team, making it the default choice for many developers.

9. The community

Although Vite is a relatively new library, it has accumulated 9.1K stars, it is used by 755 repositories, it also has 54 contributors and has 5,863 weekly downloads on NPM.

Poi has 5K stars on GitHub, 57 contributors on GitHub and 1,760 downloads per week on NPM:

Vue CLI has the highest statistics on NPM with 24,236 downloads per week, it is also used by over 400,000 repositories, it has 370 contributors and it has 25.9 stars on GitHub.

Bili manages 878 stars on GitHub, which is used by 1,529 repositories with 20 repository contributors.

conclusion

In this article, we took a look at some of the features that stand out among the four great build tools for bootstringing Vue projects. The Vue CLI is the default choice for many developers because it makes bootstringing and managing projects a breeze, and it can be easily extended with plug-ins. The Vue CLI also has more features than any other scaffold project tool.

The four scaffolding tools we saw today are similar, with just a few basic differences, mainly the customization options and the seamless use of them.

While Vite is still experimental, we can see how it reflects the seamless nature of the Vue CLI (both were built by the same person).

Which one do you prefer? Why is that? Let me know in the comments section what you think, or what other comparisons you’d like me to make.

The last

Recently organized a high quality video tutorial resources, want to be able to pay attention to the public number can get free oh!

Source: blog.logrocket.com

Public account “Front-end Full Stack Developer”