Parcel is a web-side packaging tool
that can provide a hot development project environment. Otherwise, Webpack
will be faster than building a project.
We now create a directory locally
, then use an editor to open the directory we created and run the terminal.
Enter npm init in the terminal to initialize a project.
After running, we will get a package.json file
. Then we need to import parcel
and then we execute it in the terminal.
npm install parcel-bundler
After installation, we can see the corresponding dependency package by looking at package.json.
Then we create the root directory src of the project and create an index.html under src.
The reference code is as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
It is a very common html file format
Then add two lines of code under scripts in package.json
"dev": "parcel src/index.html",
"build": "parcel build src/index.html"
Add the package and compile command and tell it that we package and compile through index.html under src
Then we need to write a js entry file.
We create a main.js file under the main folder in the project src directory
and then import our entry file in index.html under src.
The reference code is as follows
<script src="./main/main.js" type = "module"></script>
Because it is a modular development, set the type to module
and then we output a sentence in main
console.log("执行成功");
Then we execute in the terminal
npm run dev
At this point, the project is running on a port,
then copy this address to the browser to run the page
, and then we will look at the project directory. The newly generated dist is the file we packaged.
