parcel是一个零配置打包工具，内置一个开发服务器。

一. parcel开发，构建

一. 安装parcel:

yarn global add parcel-bundler

二.开发

parcel src/index.html

1.开启代码监听，同时打开parcel的内置服务器，在浏览器中打开http://localhost:1234就能看到效果。

2.执行完这句命令的同时，文件里会生成一个dist目录，这个dist会对我项目里原有的html,js,css文件进行重构，重新在dist目录里生成一份。但是，每个js,css都多了一个对应的.map文件。

.map: 把真正运行的代码与源码关联起来，给浏览器的调试工具用，平时是不运行的。比如上面你运行了parcel命令后，实际上访问页面的时候是使用了你dist目录下的代码，而这个dist目录下的js css html就是你真正运行的代码，源码就是你原本页面的html、css 和 js，它就是通过.map实现了你更改原来文件下的代码来同步更改dist里对应文件的代码的.

三. 构建

parcel build src/index.html

此时，第一次build，会创建一个package.json文件，文件内容如图所示。由于在我的html里出现了svg,报错了：

改为如下代码，可以成功：

parcel build src/index.html --no-minify   //不压缩

可以看到，build命令会在dist目录里新建五个文件，其中index.html因为与之前的dist目录里的html重名，所以新的会覆盖原来的。而另外四个js和css以及他们的.map文件，与原来的名字是不一样的。（原来是main.1f19ae8e.js，新的是main.0651f919.js） 一般来说，新生成的是压缩过的。

所以我们在build之前先把原来的dist删掉，再build，生成新的dist。

rm -rf dist

parcel build src/index.html --no-minify

此时dist目录里就只有build新生成的了：

因为我们要用dist里的html发布，看看这个文件能不能用。打开dist目录，里边的index.html文件，发现引用的JS文件前边多了一个/，通过 parcel build --help查手册，发现默认加/

所以我们需要把默认的改成dist目录下的。可以直接加'./'

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

这样就可以让index.html引用它同级的main.js。重新build之后，发现index.html里的js引用正确了：

二. git命令

git init
git add .
git commit -m ''  //提交代码到本地仓库
git remote add origin git@github.com:aq82041/my-nav.git
git push -u origin master   //上传到github

三. yarn build

在我已经build完之后，如果我修改了代码，要再次build时，那句代码太长了，每次都打很麻烦，所以用简单的代替，具体步骤：

1.运行：

yarn init -y

这句会生成一个package.json文件，但是我们第一次build就已经生成了这个文件，不用管，这句命令会额外做一些什么。执行后，package.json文件的内容：

2. 在package.json文件里加个脚本：

"scripts":{   //必须是双引号
    "build":"rm -rf dist && parcel build src/index.html --no-minify --public-url ./"
  },

先删除dist文件，再build

3 . 运行：

yarn build

比如我们修改了代码，要再次build时，就可以用yarn build代替删除dist目录和build这两句命令。

四. 发布到Github Pages

找到仓库首页的Settings，下拉到Github Pages，选择master branch

会生成一个网站，在后边加上路径名，/dist/index.html，就可以预览了。把整个路径记得写在仓库的前边。