Skip to content

gitjcc/xstrap

Repository files navigation

xstrap

xstrap webpack 模块化版本

安装

$ npm install 
$ npm i webpack -g
$ npm i docsify-cli -g

// 如果node-sass没有安装成功则运行下面这个命令
$ cnpm install --save-dev node-sass

使用

tip: 这些命令都是写在package.json里面的。

  • 开发
$ npm run dev

项目根目录为开发服务器根目录。可静态访问所有资源。默认打开examples文件夹下面的index.html

  • 构建

输出生产环境文件到dist文件夹

$ npm run build
  • 写文档

在dosc里面写相应组件的markdown文件,文件名为[你的模块名].md

  • 查看文档
$ npm run docs

线上访问:http:https://localhost:6000/modeleName (你的模块名,不要加md后缀) [端口号暂定6000,运行命令后控制台将显示];这个地址对应的实际上访问的是:modeleName.md这个文件

目录结构

|---- root
  |---- build webpack配置文件构建相关
  |---- dist 是编译后的文件,压缩版
      |---- vendor 第三方大包,直接放在这里,不参与打包
  |---- docs 存放使用文档
    |---- dist
    |---- doc 组件文档都放在这里
    |---- vendor docsify这个包自带的一些引用文件
    |---- index.html docsify这个包入口页面
    |---- README.md docsify这个包默认的首页
  |---- src 源文件
    |---- common 公用js文件
      |---- js 通用js文件
      |---- styles 样式
        |---- common 公用的部分
        |---- mixins 公用的scss
        |---- themes UI 主题
        |---- index.scss 样式入口文件,负责将所有styles里面的样式都打包到这里面
    |---- components 组件
    |---- util 工具js
    |---- vendor 有些东西不得不放在外面,没有这样的文件的时候这个文件夹是空的
    |---- develop.js 开发用的出口,对应webpack.dev.config.js中的entry
    |---- xstarp.js 构建用的出口,对应webpack.prod.config.js中的entry
  |---- test 测试文件、代码测试、测试数据目录
    |---- common 
  |---- server.js 开发服务器入口文件
  • dist是编译后的文件,压缩版;
  • src是源码文件;
  • 压缩源(src)文件,生成压缩包到(dest),dest一般和src配对出现。

组件化结构

|---- components_name 组件件/模块名
	|---- images 如果有,则建这个文件夹。文件夹名字无所谓。本组件需要的放在这里。
  |---- components_name.js js文件
  |---- components_name.scss 组件强依赖文件 
  |---- components_name.pug 组件模板,也可以html,handlebar什么的
  |---- index.js 组件入口,供出口文件调用。统一index.js名,容易调用
  • 如何

功能点

  • 模块化开发。和写nodejs一样写js。
  • 性能要好。模块那么多,需要按需打包
  • 组件化开发,一个组件的js、css、模版最好都在一个目录维护
  • sass写css
  • 压缩图片
  • 图片小于8K,base64引入(base64 支持IE8);css sprite
  • autoprefix自动添加前缀解决兼容样式,postcss对css进行后处理
  • js、css、图片压缩
  • 自刷新
  • 本地服务器?这个可以用 express 整一个
  • 部署?hash版本号。

src目录详细

构建工具

  • 使用webpack 对代码进行编译构建、模块打包
  • 开发环境(dev),生成环境(prod)分别打包
  • 特殊需求单独打包,写一个数组,把用到的插件、组件、模块名放进去,webpack构建一下就可以生成所需要的bundle
  • gulp可能用的上,用来执行简单任务

编码规范

airbnb JavaScript 编码规范 js doc 规范。Why js doc? phpStorm 能够检查传参类型 Use JSDoc: Getting Started with JSDoc 3

代码审查

代码质量检查:ESLint

单元测试

对于复杂度较高的模块,需要单元测试,进行质量控制 mochajs 测试框架 Mocha 实例教程

模块化思路

  • CMD规范 目前
  • ES6 规范,将来;with babel

js: vendor.js [vendor lib] xstrap.js [module bundle]

写webpack配置文件,打包指定模块的文件

自动化思路

webpack-dev-server

browser-sync

$ browser-sync start --server --files "**/*.css, **/*.html, **/*.js"

webpack-dev-middleware && webpack-hot-middleware

为了以后可以支持定制,采用这种方式,而且可以减少开启的服务器数量。

其他自动化

  • 每一个组件都在自己的目录进行维护,保持结构清晰;
  • 如果多个模块都引用了同一个模块,打包的时候webpack会把这个模块提取出来,只用一份; 地址

文档规范

docsify

其他问题

  • css的输出问题;
    • 是否需要分成一个base.css + 增量css,base.css 单独文件形式可利于缓存。
  • npm 依赖版本号问题
    • yarn 模块来lock依赖版本号
    • e.g. jquery2.0以下才能兼容在IE8
  • 字体文件,logo这些静态资源如何组织?资源文件,充分利用缓存
  • lazyload 所有文件打在一个包里之后,有的代码对首屏渲染没有任何帮助,可以lazyload
  • markrun 会产生一个标题id,示例代码里面不要设一样的id,否则会错乱
  • 减少冗余代码

参考文章

用到的东西