Parcel is a zero-configuration packaging tool with a built-in development server.

Parcel development

Install a parcel

yarn global add parcel-bundler
Copy the code

Development of two.

parcel src/index.html
Copy the code

1. Enable code listening and open the parcel’s built-in server. Open http://localhost:1234 in your browser to see the effect.

.map: the real running code and source code association, for the browser debugging tools used, usually is not run. For example, after you run the parcel command above, you’re actually using the code in your dist directory. The JS CSS HTML is the code you’re actually running and the source code is the HTML, CSS, and JS of your original page. What it does is it does dot map where you change the code in the original file to synchronize the code in the corresponding file in dist.

3. Build

parcel build src/index.html
Copy the code

At this point, the first build creates a package.json file with the contents shown in the figure below. Error: SVG appears in my HTML:

Change to the following code to succeed:

Parcel build SRC /index.html --no-minify // uncompressedCopy the code

(The original was main.1f19AE8e.js, the new is main.0651f919.js) 

rm -rf dist
Copy the code
parcel build src/index.html --no-minify
Copy the code

The dist directory now contains only the newly generated build:

parcel build --help 

parcel build src/index.html --no-minify --public-url ./
Copy the code

This allows index.html to reference its sibling main.js. The js reference in index.html is correct:

Git command

git init
git add .
git commit -m ' 'Git remote add origin [email protected]:aq82041/my-nav.git git push -u origin master // upload to githubCopy the code

3. Yarn build

After I have built, if I modify the code and want to build again, that code is too long, it is very troublesome to type every time, so I use simple instead, specific steps:

1. Run:

yarn init -y
Copy the code

This will generate a package.json file, but we already generated this file in our first build, so this command will do something extra. After execution, the contents of package.json file:

"scripts":{// must be double quotation marks"build":"rm -rf dist && parcel build src/index.html --no-minify --public-url ./"
  },
Copy the code

Delete the dist file first and then build it

3. Operation:

yarn build
Copy the code

For example, when we modify the code and want to build again, we can use YARN build instead of deleting the dist directory and build.

Publish to Github Pages

Go to Settings on the repository homepage, scroll down to Github Pages, and select Master Branch

Add the path name to the end, /dist/index.html