利用Parcel对项目进行打包
对于一个开发完成的网站,我们一般会将里面的资源做出两种的处理方式,一种是自己架设一个服务器,还有一种就是利用第三方的CDN工具来进行托管。
一般更好的方式是利用第三方的CDN去进行一个托管。
但是还有一个很令人头疼的问题,就是可能要对开发完成后的页面进行一个打包。
于是这里来介绍一些打包构建。
我们先尝试一下,在项目的根目录里面新建一个叫做parcel
的文件夹,然后在里面放入一个server.js
的文件来启动一个parcel打包服务,index.html
作为静态的网页来挂载打包后生成的css文件或者是js文件。
index.html:
然后在server.js
里面动用一个koa服务来启动这个项目
这里我们使用了一个叫做koa-static
的中间件。
然后再安装一下parcel:
然后写一个打包的命令:
命令的意思是打包的时候打包到parcel/dist的目录下面去,并且不会使用之前的缓存方式。
这样它就会将我们的项目demo打包到parcel的dist目录下面去。
这里我们就完成了传统的项目的打包,现在我们可以使用parcel来完成对一些现代框架(例如React的打包开发)。
使用Parcel对React项目进行打包
首先我们现在parcel的目录下面新建一个名为es的文件夹,里面放一个index.js
和app.js
的文件。
其中index.js
里面放上 react 的一些代码,然后app.js
里面放组件
然后app.js
里面的代码是这样的:
由于上面使用了es6的代码,因此我们需要使用babel来做一个JavaScript的向下兼容。
在根目录下新建一个叫做.babelrc
的文件
然后再把这些babel所需要的依赖都安装一些
同时配置好了babel之后,还要记得在index.html(即我们打包的入口html文件)引入一些这个js文件:
然后打包完成之后,可以修改一波script的打包脚本命令,因为每次打包之前要把之前打包的文件给删除掉:
|
|
这样我们就完成了利用parcel对React项目的打包。