《parcel打包,将前航项目发布到github预览》

·  阅读 529

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,就可以预览了。把整个路径记得写在仓库的前边。

分类:
阅读
标签: