https://github.com/huarongsao/multipage-start-kit
基于webpack的前端工程化,多页面入口，IE8+和移动端开发手脚架
https://github.com/huarongsao/multipage-start-kit
Last synced: about 1 month ago
JSON representation
基于webpack的前端工程化,多页面入口，IE8+和移动端开发手脚架
- Host: GitHub
- URL: https://github.com/huarongsao/multipage-start-kit
- Owner: HuaRongSAO
- Created: 2017-08-20T01:22:12.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-08-20T05:40:54.000Z (almost 8 years ago)
- Last Synced: 2025-04-22T13:08:25.029Z (about 1 month ago)
- Language: JavaScript
- Size: 319 KB
- Stars: 23
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# multipage-start-kit
[](https://travis-ci.org/alanshaw/david-www)
基于 Webpack 开发和构建 传统多页面静态站点的前端工程化方案，支持ie8+
同时适用于 PC 端和移动端。
## Requirements
* node `^5.0.0`
* yarn `^0.23.0` or npm `^3.0.0`
## 功能
- ES6语法支持
- IE8兼容
- 前端工程化
- 支持响应式
- 模块化
- 组件化
- 开发、调试和构建
- 集成 PostCSS、Sass
## Installation 安装
```bash
$ https://github.com/HuaRongSAO/multipage-start-kit
$ cd
$ npm i
$ npm start //开始开发和调试
$ npm run build //压缩打包
$ npm run server //发布运行本地服务器
```
## 全局补丁
## 添加 polyfill
按需引入 polyfill，提高浏览器兼容性。
polyfill 在 `/src/javascript/polyfill.js` 文件中引入：
```js
// 1) Object.assign
Object.assign = require('object-assign')
// 2) Promise
if (typeof Promise === 'undefined') {
require('promise/lib/rejection-tracking').enable()
window.Promise = require('promise/lib/es6-extensions.js')
}
// 3) Fetch
// ------------------------------------
// Fetch polyfill depends on a Promise implementation, so it must come after
// the feature check / polyfill above.
if (typeof window.fetch === 'undefined') {
require('whatwg-fetch')
}
// 3) 第三方工具库
if (typeof window._ === 'undefined') {
require('lodash')
}
```
## 样式编写规范
请参照 BEM 规范，详情见：[https://github.com/zhaotoday/bem](https://github.com/zhaotoday/bem)，下面是一个例子：
HTML 代码：
```html
```
Sass 代码：
```scss
.nav {
&__item {
&--normal {
}
&--active {
}
&--hover {
}
}
}
```
## 响应式开发
```npm i -D include-media```
```scss
@import "~include-media/dist/_include-media.scss";
$breakpoints: (phone: 320px, tablet: 768px, desktop: 1024px);
.selector {
@include media("<=tablet") {
background-color: red;
}
@include media(">tablet", "=desktop") {
background-color: green;
}
}
```
# 目录结构
```shell
├── bin #服务器配置文件夹
│ └── server.js #express #服务器实例配置
├── build #webpack配置文件夹
│ ├── filePath.js #文件路径
│ ├── tool #封装的小工具（获取文件，log）
│ │ ├── getFile.js
│ │ ├── logger.js
│ │ └── watchDirs.js
│ ├── webpack.config.base.js # webpack基础配置
│ ├── webpack.config.dev.js # webpack 开发模式基础配置
│ └── webpack.config.production.js # webpack 生产模式基础配置
├── dist # 输出文件夹
├── package.json
├── README.md
├── src # 根路径
│ ├── data # 静态数据
│ │ └── data.json
│ ├── image # 静态图片
│ │ ├── logo.png
│ │ └── p.jpg
│ ├── javascript # js模块
│ │ ├── lib # js库文件
│ │ │ └── normalize.js
│ │ ├── polyfill.js # pilyfill 文件
│ │ └── vendor # vendor 文件
│ │ └── vendor.js
│ ├── layout # html模板文件
│ │ ├── head # html模板文件 组件
│ │ │ ├── MobileHead.ejs # flex-lib 移动分辨率兼容方案
│ │ │ └── PcHead.ejs # 移动方案
│ │ └── polyfill
│ │ └── polyfill.ejs # html5 shim
│ ├── setting.js # 项目设置（端口）
│ ├── style # 样式
│ │ ├── app.scss # 全局样式入口
│ │ ├── base # 样式工具模块
│ │ │ ├── _base.scss # 基础样式工具模块
│ │ │ ├── _color.scss # 颜色工具模块
│ │ │ ├── _fn.scss # 方法工具模块
│ │ │ ├── _mixin.scss # mixin工具模块
│ │ │ └── _reset.scss # reset样式工具模块
│ │ ├── style.js # webpack 样式入口（！单一css输出设置）
│ │ └── utill.scss # 样式工具模块出口
│ └── view # 单页面文件夹
│ ├── home # 页面文件夹
│ ├── home.html # html文件
│ ├── home.js # js文件
│ ├── home.scss # scss文件 需要import到app.css
│ └── asset # 静态资源
│ └── bg.jpg
│
└── static
├── favicon.ico
└── readme.md
```