引入静态资源

aotoo-hub的前几代作品,像aotoo-o、fkp等,都是采用了gulp, webpack混合编译模式,gulp负责样式,模板的编译, webpack负责js的编译,本以为是一个完美的结合。但当公司业务起飞后,gulp,对,就是gulp它成为瓶颈,拖慢了开发 的流程,我们知道gulp不支持热更新,当批量更新时,响应非常慢,精准更新时又需要开发人员去精确匹配相关文件。

到了aotoo-hub这里,我们决定所有编译改为全webpack支持。

新项目迷思

# 新建项目
$ aotoo create aaa
# 选择yes

通过上述操作,我们成功的新建了一个项目,现在我们在项目的初始状态了
查看src/aaa项目目录

workspace
    └── src
        └── aaa 
            ├── dist      // 静态文件输出目录 
            │    └── ......  
            ├── js        // 前端业务js目录,核心源文件目录
            │    └── index.js  
            └── configs    // 配置文件目录 
                  └─ default.js  // 默认配置文件

非常简洁的一个结构,不禁产生了以下疑问

设计理念

一些问题

  • 为什么没有模板目录
  • 为什么没有样式目录
  • 页面中都引入了哪些静态资源

扩展问题

  • 如何添加自定义的模板
  • 服务怎么提供的

下面我们来回答这些问题

Q: 为什么没有模板目录?

因为每一个业务页面都有自己的js文件,因此我们认为src/js/*.js覆盖了所有的业务页面,aotoo-hub自动为这些js文件生成一个同名html模板(带一个id=root的div),模板中都引入相应的静态js资源(vendors.js, common.js, [page].js),[page]是src/js/*.js同名变量

Q: 为什么没有样式目录?

同上原因,但aotoo-hub并不自动补全同名样式文件,只有在src/js/*.js中手动引入了样式(only stylus),触发编译时生成同名样式文件。

// index.js
import './index.styl'
console.log('引入静态css资源')

上面的文件经过webpack编译后,会在dist目录中生成两个对应的文件

  1. index.css
  2. index.js
Q: 页面中都引入了哪些静态资源?

在以前的架构设计中,我们为每个页面设计了两种资源

  • common资源
  • [page]资源

其中common是固定名称,page为变量名称,即不同页面对应不同的page资源,如/abc对应abc.cssabc.js

common包含两个部分内容

  • venders库 // 如react, vue等
  • webpack抽取的公共库 // 通过commontrunk或者splittrunk等webpack插件、属性收集的公共部分,架构会实时的合并两个部分的内容为common.js
资源配置新方案
  • vendors资源
  • common资源
  • [page]资源
每个页面引入资源文件
  • common.css
  • [page].css
  • vendors.js
  • common.js
  • [page].js

模板内容页大致如下

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="/css/common.css" />
    <link rel="stylesheet" type="text/css" href="/css/index.css" />
  </head>

  <body>
    ...
    ...
    <script src="/js/vendors.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/index.js"></script>
  </body>
</html>
Q: 如何添加自定义模板?

在项目目录中插入html目录,并新增相关的业务同名html模板

workspace
    └── src
        └── aaa 
            ├── html      // 静态文件输出目录 
            │    └── index.html  
            ├── js        // 前端业务js目录,核心源文件目录
            │    └── index.js  
            ...
            ...