When I first wrote the front end, I encountered a problem. In an HTML file, I used import to import a JS file:

<body>
    <h2>pipeline demo</h2>
    <script type="module">
        import {popManager} from './usePipeline.js';
        popManager.run();
    </script>
</body>
Copy the code

Open the HTML file directly in the browser (file:///Users/wangsuyan/Desktop/easytask/examples/public/pipeline.html), you will find an error in your browser:

At that time, I encountered this problem, I did not find a good solution for a long time, the Internet said to install a vscode plug-in. Until one day WHEN I was writing Webpack, I found WebPack Dev Server.

Later, I wrote an article on making a universal WebServer, which mainly showed how to use WebPack Dev Server to access the front end of the page, so as to solve the previous problems. Now reading this article, I feel so stupid.

Later, when I was engaged in Node, I seemed to have discovered a new continent, and wrote an article to build a Web service supporting ESM module with a few lines of code. This article is mainly to build a Webserver through the static service of Express. Core code:

const express = require('express');
const path = require('path');

const port = process.env.PORT || 8686;
const app = express();

// Pass the contents of the suyan folder to express.static
app.use('/', express.static(path.join(__dirname, 'suyan')));

// start http server
app.listen(port, () = > {
    console.log(`Open in browser http://localhost:${port}/index.html}`);
});
Copy the code

Later, I actually used this method in my actual work.

At the time, I was developing a demo of a typography engine and didn’t want to use it because webpack was a clunky thing. My scene is a simple HTML + TS. I just use Express to create a static service and put JS and HTML in the static service directory. TSC allows us to convert TypeScript to JS in real time. You don’t need to spend any packaging time, the demo is enough. Manually refresh the browser after the code changes.

But this approach has several drawbacks:

  • 1. After the code is updated, you need to manually refresh the browser to see the effect;
  • If you use import to reference js, you need to add the suffix to the file. Otherwise, you cannot find the file.import suyan from './index.js';
  • 3. Browsers cannot parse files with other suffixes, such assuyan.vue;
  • 4. Use a third-party library, not this way of referenceimport vue from 'vue', must use a path, such asimport vue from './vue.js';

When I was trying to solve these problems, I saw various vite articles every day, and training institutions started to tout Vite, and the front end circle started to get anxious again. Webpack hasn’t learned yet, and here comes a vite, Utah is repeating the wheel……

At this point, I chose to ignore the messages, only to learn that Vite is a new packaging tool that uses a native modularity solution. Last weekend, I watched a live class, sharing the realization principle of Vite, I have nothing to do, just listen, do not listen to do not know, a listen to startled.

The fact that this guy solved all four of my problems, and did it perfectly, caught my attention. Isn’t this the package I’ve been looking for?

One day, I ran a project and compiled for a long time. As a result, I ran and reported an error. I recompiled again. I was wondering if we were really behind The Times with the way we compiled, and if we could introduce Vite, it would definitely be a step up in front-end engineering for the whole team. At this point, Vite caught my attention again.

I decided to embrace Vite because of the productivity benefits it brought to the entire team.

This is not, I also specifically moved the official documents to the public number on why choose Vite, the purpose is to be able to use the fragment time Vite official documents read. I don’t know if you’re gonna watch it, but I’m gonna watch it.

Before learning a new technology, we should consider whether it is worth learning, depending on the actual situation of the individual, such as if you are doing engineering work in a team, it is definitely worth learning. Let me just tell you what a Vite is.

When we use WebPack, if we want to use vUE + TS technology stack, what configuration does WebPack need to do? You need to configure vue-loader, CSS-loader, TS-loader, configuration entry, export, etc., in short, very cumbersome, sometimes just want to write a demo, just! Also, webpack-packed code is unfriendly.

Vite, on the other hand, doesn’t have to be packaged in the development environment, not at all, but you don’t feel like it has to be packaged. It implements a “unique WebServer” that allows the browser to access and parse arbitrary resources. Think about it, when the browser visits a web page, it will first load an HTML, and then parse the HTML file. If it encounters other resource files, such as JS files and CSS files, the browser itself can parse these two kinds of files. If js references vue files, ts files, these browsers will not be able to parse, but Vite does, I will give you a basic demo:

The demo uses a stack of “vue2 + TS + less” that does not use scaffolding to create projects. You can find all the resources available in the browser’s Network, including vue files, TS files, and some third-party libraries:

Vite is incredibly easy to configure and only needs to do a few things:

  • Vite provides built-in support for.scss,.sass,.less,.styl, and.stylus files. You only need to install the less library when using less.

  • I use vue-class-Component and vue-property-decorator respectively, and both work fine:
<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator';

@Component({})
export default class SyFooter extends Vue {
    @Prop(String) slogan! : string; age =20;
    name: string = 'plain yan';
}
</script>
Copy the code
  • 3. Vue2 supports only one plug-in, which is the configuration file of all vite configurations:

To develop, simply execute NPM run dev:

If you use WebPack to implement a demo with a “vue2 + TS + less” technology stack, you can configure a lot of things that really don’t compare to Vite.

So how do you package online code?

In addition to providing the offline dev Sever, Vite also provides the ability to package online code at the same time.

In short, Vite is revolutionary in that it provides webServer in the development environment to make the entire development process efficient, while supporting online packaging. There have been similar schemes before, but the success of a library depends not just on the technology, but also on the inherent nature of the founders.

Although Vite is powerful, there will certainly be some problems in the actual use of the process, and I will slowly share with you later. I will first try to use Vite to run the company’s projects in my spare time. The demo for this section can be found here at github.com/lefex/FE.