Vite generally recommends using scaffolding tools to create projects, or using community templates:

# use npm 7.x
npm init vite some-prj -- --template vue-ts 

# use yarn
yarn create vite some-prj --template vue-ts
Copy the code

Inspired by the recent developments in NuxT3, I rethought the original introduction of Vite, which was Vite = devServer + Bundler, a development server and packer.

The main tool for the development server to parse and transform code is esBuild, while the packager uses Rollup due to the lack of maturity of esBuild.

Distinguish betweencreate-vite 和 viteTwo packages

Simply, the create-Vite package acts like scaffolding. You specify the project name, template name, etc., and it will help you create the project for the template on disk, as well as install the required dependencies, including Vite itself.

I’m not going to repeat the introduction of Vite, am I? There it is.

So how do you verify that Vite is the “next generation packaging tool” that includes a development server and a packer?

Create an empty project and install itviteRely on

Create a directory and initialize the project:

mkdir pure-vite-use-demo && cd ./pure-vite-use-demo && yarn add vite -D
Copy the code

After executing the above command, you should have a folder with the following structure:

- pure-vite-use-demo
  + node_modules
  - package.json
  - yarn.lock
Copy the code

A common node package structure, package.json, looks like this:

{
  "devDependencies": {
    "vite": "^ 2.6.2." "}}Copy the code

Supplementarypackage.jsonattribute

{
  "type": "module"."scripts": {
    "dev": "vite"."build": "vite build"
  },
  "devDependencies": {
    "vite": "^ 2.6.2." "}}Copy the code

Specifying type as “module” lets Node know that the module mechanism for this project is ESM.

Specify two scripts, dev to verify the functionality of the development server and build to verify the functionality of the packer.

Javascript and index.html, SRC /*. In fact, as long as the dev command runs successfully, the build command will also be successful. You just need to configure the information you need for vite packaging.

Start the development server

yarn dev
Copy the code

If nothing happens, such as a power outage or a blue screen, you’ll get console output like this:

$vite Could not determine entry point from rollupOptions or HTML files. Skipping Dependency pre-bundling. Vite v2.6.2 dev server running at: > Local: http://localhost:3000/ > Network: use `--host` to expose ready in 342ms.Copy the code

If you visit http://localhost:3000/ at this point, you will be rejected:

That’s because/will access /index.html by default, and vite’s default root directory is the project directory, there is no index.html in the project directory, Could not determine entry point from rollupOptions or HTML files.

Smart you can think of: a file package. Json, visit it as http://localhost:3000/package.json:

With that done, the next step is to follow the official configuration documentation to implement the project you created from scratch, or to trade in your old project for a new one.

viteActs as a library packer

Because the current vite default packer is rollup, even if you don’t use a development server, you can build JavaScript libraries using only vite in your configuration file.

See the Vitejs Doc – library pattern for details