parcel-multipage-cli v0.0.3
parcel-multipage-cli
快速构建基于 parcel 的多页应用前端工程化开发环境
简介
parcel-multipage-cli(简称pmp-cli)能够帮助您快速初始化一个基于parcel的前端工程化项目,让您专注于业务代码的书写而不用关心工程化的问题,从而提升页面的开发效率。 通过pmp-cli构建的项目具有如下功能特性:
- 模块热重载
- npm支持
- 环境区分
- css预处理
- babel编译
- 打包结果后端友好
- 代码拆分 *
适用场景
- 静态网站开发
- 后端渲染模板开发
- 活动落地页开发
安装
npm install parcel-multipage-cli -g
本项目依赖parcel,安装前请确认您已安装过parcel。如未安装请执行
npm install parcle-bunlder -g
来安装parcel。详情参见 parcel官网
创建项目
pmp-cli create <project-name>
启动项目
cd <project-name>
npm run dev
浏览器打开 http://localhost:1234/pc/index/index.html
打包项目
npm run build
使用说明
模板类型
pmp-cli提供了两个项目模板:
- parcel-multipage & Basic examples (full版)
- just parcel-multipage (simple版)
第一项带有基础的示例,包括全局js、css的引入、全局方法的注册、import()动态引入npm包等;
第二项仅初始化了项目目录,无示例代码。
在执行创建项目时可根据您的实际需求来选择项目模板类型。
目录结构(full版)
├─build
├─dist
└─src
├─api
├─assets
│ ├─images
│ └─styles
├─pages
| ├─m
| │ └─index
| └─pc
| └─index
|
└─main.js
main.js
main.js文件将会被每一页的js文件引用,所以可以在main.js文件中进行全局 js、css 的引入,全局方法的注册。
关于代码拆分
parcel默认会将第三方依赖(通过npm安装的包)打包输出到js文件中,导致js文件体积过大。采用 import() 方法动态引入第三方依赖可解决上述问题,详情可参阅parcle官方文档代码拆分、阮一峰ES6标准入门import()部分,以及本项目中的示例代码--通过import()引入axios。
也可通过cdn的方式引入全局css、js来减小打包体积,可参见项目示例代码main.js中全局引入layui、iconfont。
显式指向文件
pmp-cli默认构建的是有多个多页应用,有多个入口文件。因此直接打开 http://localhost:1234/ 是不行的, 反而你需要显式地指向文件 http://localhost:1234/pages/pc/index/index.html。 详情参阅parcel官方文档多个文件入口部分