基于webpack4.x, babel7.x 搭建的多页面脚手架, 简化前端开发流程,专注于开发可复用的现代化网站

2018-10-23 admin

开箱即用的多页面脚手架, 基于webpack4.2x babel7.1x模块化开发可复用的现代化网站(Without Vue Angular React)

特性 (Feature)

  • 支持前后端分离开发
  • 配置完整的打包方案
  • 支持本地开发热更新
  • 集成代码风格校验Eslint
  • 支持ES6编写源码,编译生成生产代码
  • 内置sass开发环境,自动加样式前缀,自动编译css && 注入到页面
  • 开发(生产)环境代码自动注入页面, 专注于开发
  • 编译后的程序不依赖于外部的资源, 可放到CDN

使用指南 (Usage)

下载使用

git clone https://github.com/BiYuqi/webpack-seed.git
cd webpack-seed
npm install

本地开发(dev)

npm run dev

打包(build)

// 普通打包(大部分) npm run build publicPath默认 '/'
npm run build
// 打包时 npm run build:git 该命令会打包的路径会自动带上github项目地址/webpack-seed/
//(当发布环境不是服务器根路径,都可以采用该方案,只需更改路径名称即可,本项目二级路径为webpack-seed)
npm run build:git

开发规范 (Standard)

import引入 export导出 具体请参考 ES6 module语法

/**
 * 每个页面(模板)都必须包含(基础)以下文件
 */
index.js // (业务逻辑代码入口)
tpl.js // (模板拼装入口)
模块名.ejs // (页面编写入口)
/**
 * 以下可根据自己需要添加
 * 模块下可以建立文件目录用来填写业务代码,上述只是基础规范,扩展性比较强
 * /
eg:
  src/views/about/ 在该目录下创建文件夹/aboutCom
        ---- a.js 业务a代码
        ---- b.js 业务b代码
都是需要通过ES6规范导出导入
  • 页面公用css,全部需要在公用base.js引入(便于webpack处理),配置,然后每个页面引入base.js 使用
  • 页面开发跳转页面都是基于打包后输出的绝对路径进行编写 html/模块.html 详情
  • 全部采用模块化开发,每个模块都是一个文件夹 详情 (开发环境views下创建)
  • 该文件夹包含 模块模板写页面(模块名.ejs) + 模板混合(tpl.js) + index.js(该模块业务逻辑) 打包后会自动注入,无需手动引入js文件 详情
  • 各个js功能模块之间互相引用,一律使用ES6语法
  • 样式编写基于各模块入口js直接 import '样式地址 ’ 参考
  • 页面(.ejs)图片引入方式 详情
  • assets是webpack resolve配置好的别名,代表assets目录
<img src=/"<%=/index.html require('assets/image/demo.png') %>" alt="">
  • 页面header配置位置(即nav导航栏配置)详情
  • 页面footer配置位置(即footer底部栏配置)详情
  • 页面header footer业务逻辑(即两者公用js)建议写在common/js该文件下, 统一由base.js注入示例
  • 页面支持ejs模板开发,模板文件建议统一规划到一个文件夹(本项目目前放在templates/注:views/目录只能放页面模块,不可放模板) 具体请看 模板 使用

目录结构 (Source)

  • build/
  • config.js 开发,打包基础配置(包含输出文件名, 路径配置等都在此配置)
  • utils.js 多入口,多页面基础配置
  • webpack.base.config.js 基础配置
  • webpack.dev.config.js 开发环境
  • webpack.prod.config.js 打包环境
  • src/
  • common/ 项目公用资源 (公用图片,css,js等配置)
  • ----------------libs.js 第三库自动渲染到页面(此处配置的静态资源,会自动注入到页面) 配置 二十二款最受欢迎的HTML5游戏引擎对比(上) iis7站长之家 底层实现
  • api 接口请求配置 配置 编写 使用
  • components 项目模板 (复用的页面片段,目前该模板已趋于稳定,细节样式需调整)
  • layout/ 项目结构模板 (供各个子模块调用,后续可扩展多样化模板,可以添加不带侧边栏的模板等)
  • ----------------layout 默认模板(header+footer)
  • ----------------layoutAuth 定制化模板 (比如登录页没有header或者相关)
  • ----------------XXXXXXXX 可根据业务需求,定制自己的页面基础模板
  • templates/ 页面中使用到的模板片段存放目录
  • views/ (模块开发文件夹)
  • ----------------子模块,各种模块页面
  • vendor/ 第三方库存放在此

输出目录 (Output)

查看输出

  • dist/
  • html
  • image
  • media
  • css
  • js
  • lib
  • index.html

注意:如果有音视频等,会被打包在media目录

TODO

  • [x] 添加ejs模板,进行页面(首尾)复用, 页面功能模板渲染
  • [x] mini-css-extract-plugin 提取js内引入scss文件失败, 打包后依然在js文件(已解决)
  • [x] 首页页面模板未完成(单独处理打包)
  • [x] 添加第三方库以链接的方式引入
  • [x] 增加ESLint代码校验
  • [x] 增加两个文件夹,一个是fix IE兼容, 一个是引入的公用库,自动加载第三方库到页面,避免手动填写
  • [x] 增加网站未登录的模板(无header,footer)
  • [x] 添加多样化layout模板支持(示例layout/layoutAuth)
  • [ ] 添加完整网站demo示例(进行中…)
  • [ ] 添加doc使用说明以及实现思路解析

LONG TODO(Base on master)

  • [ ] 建立分支web-system(后台管理系统模板), web-pc (大众网站模板), web-mobile(移动端模板)

更新日志 (Update log)

2018.10.22

2018.10.21

  • 增加模板片段支持,页面中可复用的html都可以抽离为ejs模板片段, 由ejs-loader进行编译 模板 使用

2018.10.15

  • 静态资源vendor文件夹分类,common与fixIe 这两个文件夹的文件都会被自动注入到页面引用; 使用者只需要配置lib.js即可

2018.10.11

2018.10.07

  • 修改打包后js输出路径,原有js跟着页面文件夹打包后在一起, 现在统一打包到dist/js目录下, 理由是页面script 展示好看…属于优化项

原文链接:https://segmentfault.com/a/1190000016769689

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-43417.html

文章标题:基于webpack4.x, babel7.x 搭建的多页面脚手架, 简化前端开发流程,专注于开发可复用的现代化网站

相关文章
vue+element-ui+slot-scope实现可编辑表格
1.咱开发拿到需求大多数是去网上找成型的组件,找不到再看原生的方法能否实现,大牛除外哈,大牛一般喜欢封装组件框架。 2.可编辑表格在后台管理系统还是比较常用的,因为比较流行框架element,iview都没有这个应用,所以考虑了两种方法,下...
2017-12-25
Android中Okhttp3实现上传多张图片同时传递参数
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片。 最近做项目,打算换个方法上传图片。 Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片。 Okhttp目前已经更新到Okhttp...
2017-03-17
Node.js 2014这一年发生了什么
Node.js 的 2014 年充满了不幸和争议. 这一年 Noder 们经历了太多的伤心事, 经历了漫长的等待, 经历了沉重的分裂之痛. 也许 Noder 们不想回忆14年 Node.js land 发生的事情, 但正因为痛才更有铭记的价...
2015-11-12
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰杞, Arial, sans-serif &quot;&gt;2014骞达杞浠惰杩瑷灞涓┓锛互婊¤冻ㄦ涓姹浜...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
破解前端面试(80% 应聘者不及格系列):从 闭包说起
不起眼的开始 招聘前端工程师,尤其是中高级前端工程师,扎实的 JS 基础绝对是必要条件,基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选人 JS 基础的时候,我经常会提供下面这段代码,然后让候选人分析它实际运行的结...
2017-06-02
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
HTML5凭什么可以代替Flash
本世纪初,全球网络建设仍处于早期阶段,发达国家网民刚刚在从窄带向宽带网络过渡。由于网络带宽、PC运算速度等因素限制,早期的网站基本以静态文字和图片内容为主。但随着宽带网络在全球范围快速普及,网民对内容的需求也不断变化。死板的文字加图片的网站...
2015-11-12
回到顶部