multipage-start-kit
基于 Webpack 開發(fā)和構(gòu)建 傳統(tǒng)多頁面靜態(tài)站點的前端工程化方案削锰，支持
同時適用于 PC 端和移動端。
github:鏈接
Requirements
- node
^5.0.0 - yarn
^0.23.0or npm^3.0.0
功能
- 前端工程化
- 支持響應式
- 模塊化
- 組件化
- 開發(fā)旺矾、調(diào)試和構(gòu)建
- 集成 PostCSS、Sass
Installation 安裝
$ https://github.com/HuaRongSAO/multipage-start-kit <my-project-name>
$ cd <my-project-name>
$ npm i
$ npm start //開始開發(fā)和調(diào)試
$ npm run build //壓縮打包
$ npm run server //發(fā)布運行本地服務器
全局補丁
添加 polyfill
按需引入 polyfill夺克，提高瀏覽器兼容性箕宙。
polyfill 在 /src/javascript/polyfill.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')
}
樣式編寫規(guī)范
請參照 BEM 規(guī)范，詳情見：https://github.com/zhaotoday/bem铺纽，下面是一個例子：
HTML 代碼：
<nav class="nav">
<a href="#" class="nav__item nav__item--normal">正常狀態(tài)</a>
<a href="#" class="nav__item nav__item--active">當前狀態(tài)</a>
<a href="#" class="nav__item nav__item--hover">鼠標移上時的狀態(tài)</a>
</nav>
Sass 代碼：
.nav {
&__item {
&--normal {
}
&--active {
}
&--hover {
}
}
}
響應式開發(fā)
npm i -D include-media
@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: yellow;
}
@include media(">=desktop") {
background-color: green;
}
}
目錄結(jié)構(gòu)
├── bin #服務器配置文件夾
│ └── server.js #express #服務器實例配置
├── build #webpack配置文件夾
│ ├── filePath.js #文件路徑
│ ├── tool #封裝的小工具（獲取文件柬帕，log）
│ │ ├── getFile.js
│ │ ├── logger.js
│ │ └── watchDirs.js
│ ├── webpack.config.base.js # webpack基礎(chǔ)配置
│ ├── webpack.config.dev.js # webpack 開發(fā)模式基礎(chǔ)配置
│ └── webpack.config.production.js # webpack 生產(chǎn)模式基礎(chǔ)配置
├── dist # 輸出文件夾
├── package.json
├── README.md
├── src # 根路徑
│ ├── data # 靜態(tài)數(shù)據(jù)
│ │ └── data.json
│ ├── image # 靜態(tài)圖片
│ │ ├── 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 # 項目設(shè)置（端口）
│ ├── style # 樣式
│ │ ├── app.scss # 全局樣式入口
│ │ ├── base # 樣式工具模塊
│ │ │ ├── _base.scss # 基礎(chǔ)樣式工具模塊
│ │ │ ├── _color.scss # 顏色工具模塊
│ │ │ ├── _fn.scss # 方法工具模塊
│ │ │ ├── _mixin.scss # mixin工具模塊
│ │ │ └── _reset.scss # reset樣式工具模塊
│ │ ├── style.js # webpack 樣式入口（！單一css輸出設(shè)置）
│ │ └── utill.scss # 樣式工具模塊出口
│ └── view # 單頁面文件夾
│ ├── home # 頁面文件夾
│ ├── home.html # html文件
│ ├── home.js # js文件
│ ├── home.scss # scss文件 需要import到app.css
│ └── asset # 靜態(tài)資源
│ └── bg.jpg
│
└── static
├── favicon.ico
└── readme.md
