ViteIt is a new generation of development and construction tools based on native ESM modules.
use
Vite can help you quickly create an application, it has a variety of built-in templates. Experience Vite online
> npm create vite@latest
When you start vite for the first time, it will execute
依赖预构建, it will be very slow, so don't stop vite casually
Changes of Vite 3 compared to Vite2
The official changelog is here. Overall, 400+ issuses have been fixed, the package size has been reduced, and cold startup has been optimized.
The usage can be understood as: wooden change
About ESM Modular
ESM is a modular scheme, which became the ECMA(Javascript) standard after the ecma committee released it in 2015.6 .
Subsequently, various browser manufacturers began to prepare for the development work to follow up on this standard. After the release of Firefox 60 in May 2018, all mainstream browsers will support ESM by default.
Node is also adding ESM support, and a working group has been set up to study compatibility between CJS and ESM.
So, in 2022, you can already use type="module" directly in the <script> tag, and use import and export in the code to introduce third-party libraries
<script type="module">
import {
html, Component, render } from 'https://unpkg.com/htm/preact/standalone.module.js';
class App extends Component {
state = {
count: 0
}
add = () => {
this.setState({
count: this.state.count + 1 });
}
render() {
return html`
<div class="app">
<div>count: ${
this.state.count}</div>
<button onClick=${
this.add}>Add Todo</button>
</div>
`;
}
}
render(html`<${
App} page="All" />`, document.body);
</script>
-
Before Vite became popular, why didn't everyone use the ESM modularization scheme, but the CommonJS and AMD modularization schemes?
-
Because you can see the history written above, mainstream browsers support ESM modularization, that is, since May 2018, users will not update their browsers to the latest version in time, and Vite only appeared in 2019.
-
So 3 years (development) have passed, http2 has become popular, and now you can use the ESM solution without worry, that is, you can use Vite without worry.
Existing Module Standards
The purpose of the three standards is the same, they are all modular, but each defines its own way of writing.
- CommonJS only works on the node side:
const lodash = require("lodash");
module.exports = function doSomething(n) {
console.log(lodash);
};
- AMD only works on the browser side:
define(["dep1", "dep2"], function (dep1, dep2) {
return function () {
};
});
- UMD stands for Universal Module Definition:
(function (root, factory) {
if (typeof define === "function" && define.amd) {
// AMD. Register as an anonymous module.
define([], factory);
} else if (typeof module === "object" && module.exports) {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory();
} else {
// Browser globals (root is window)
root.returnExports = factory();
}
})(typeof self !== "undefined" ? self : this, function () {
// Just return a value to define the module export.
// This example returns an object, but the module
// can return a function as the exported value.
return {
};
});
Extended reading
Vite Chinese Official DocumentationJavascript
Modular HistoryECMAScript
Modules