Create a file

  1. Manually create the H-Music folder
  2. npm init -yCreate package.json folder
  3. npm install --save-dev parcel-bundlerDownload the Pacle packaging tool — create package-lock.json and node_modules
  4. Parcle can read parcel documents and learn in two or three minutes

  1. Create and populate the index.html file
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>h-music</title>
    <link rel="stylesheet" href="src/scss/index.scss">
</head>

<body>
    <h1>h-music</h1>
    <script src="src/javascript/index.js"></script>
    <p>www</p>
    
</body>
</html>
Copy the code
  1. Manually create SRC and subordinate files

index.scss:

// Define the color variable
// The browser doesn't know the code, so you can't open it in the browser. You need parcel to change the code to CSS and place it in the.cache folder. What you see in the browser is the processed code.
$color:#ff00ff;
$color2:#ffaa33;
$color = $color
body{
    color: $color;
    p{
        color: $color2; }}Copy the code

index.js:

console.log('hello www');
Copy the code
  1. performnpx parcel index.htmlCommand. Because pacel is not globally installed this command adds the executable directory for node_modules to the PATH, and when we execute NPX parcel index.html it automatically searches for./node_modules/.bin.

A test server is started, running the index.html file with a link. Open the link to see the page.

  1. If you want to publish online, you need to execute this command. After the build is completed, these files will be generated:

Directory description

  • . Cache stores code files that have been processed by the parcel for the browser to understand
  • Dist puts files built after parcel build. What we’re releasing is the code in the dist directory
  1. Dist /index.html is available on any server. For example, using an HTTP-server:
> CD dist = > HTTP server / / open http://10.220.50.159:8080 can see we write the pageCopy the code
  1. The.map file in Dist helps us locate the source in the console
  • Node_modules is to perform npm install --save-dev parcel-bundlerCreated when you download the Pacle packaging tool to hold packages installed using the Parcel management tool
  • SRC is used to put the source code we wrote
  1. SRC /javascript is used to put JS files
  2. SRC/SCSS is used to store SCSS (CSS) files
  3. SRC/SVG is used to store SVG files
  • Package-lock. json&package.json: According to the official documentation, package-lock.json is the specific source and version number of the library currently installed on the generated system, locked version. When you install NPM install, node reads dependencies from the package.json file and compares them to node_modules. Node reads the module name from package.json, gets the version number from package-lock.json, and then downloads or updates it. When neither package.json nor package-lock.json exists, node regenerates the package-lock.json file when “NPM install XXXX” is executed. Then write all the module information in node_modules to package-lock.json. But package.json files are not generated. However, you can generate package.json files with “NPM init –yes”