最近接手一個新項目,公司官網,官網爲了對爬蟲友好,不合適作單頁面,更不大適合用react,vue這樣的框架。原本以爲幾個簡單的頁面還須要配置webpack挺麻煩,直接ES5,css,html寫寫就ok,但是一旦下手開始寫,離開了前端的各類駕輕就熟的工具,回到了刀耕火種的時代。痛不欲生,即便寫完了,之後的迭代維護一樣痛苦。 還不如建立一個腳手架,之後遇到這種官網多頁面的需求的時候拿來即用,豈不美哉。css
好了,背景就是這些,本腳手架適合作官網之類的多頁面的應用。本腳手架已經支持使用ES6,less,模塊化,熱加載,eslint等功能html
# 安裝依賴
npm install
# 開發的時候在本地啓localhost:8080,並開始熱加載
npm run dev
# production的發佈時打包
npm run build
複製代碼
└─src // src 文件夾
│ ├─pages // 頁面文件夾
│ │ ├─about
│ │ │ about.html
│ │ │ about.js
│ │ │ about.less
│ │ │
│ │ ├─contact
│ │ │ contact.css
│ │ │ contact.html
│ │ │ contact.js
│ │ │
│ │ └─home
│ │ index.html
│ │ index.js
│ │ index.less
│ │
│ └─tools // 工具文件夾
│ utils.js
│
│ .babelrc // babel的配置文件
│ .eslintignore
│ .eslintrc.js // eslint的配置文件
│ .gitignore
│ ecosystem.config.js // pm2 deploy的配置文件
│ package.json
│ page.config.js // 頁面的配置文件
│ README.md
│ webpack.config.dev.js // 開發環境的webpack配置文件
│ webpack.config.prod.js // 生成環境的webpack配置文件
複製代碼
若是增長新頁面,只需兩步,不須要改webpack等配置文件前端
好比vue
{
name: 'contact',
html: 'contact/contact.html',
jsEntry: 'contact/contact.js'
}
複製代碼
腳手架地址: github.com/JesseZhao19…react