前端编译

JS编译

支持JS(es6/7), vue的编译,后续支持 typescript

CSS编译

只支持stylus的动态css语法,不支持sass和less

编译关系

之前我们了解到,一个页面模板会自动引入如下静态资源文件

  • vendors.js
  • common.js
  • [page].js
  • common.css
  • [page].css

这一篇来了解下这些静态资源是如何生成的。

CSS编译

是因为CSS是附加编译,只有在JS文件中引入才会编译,并随之生成同名的CSS文件

workspace
  │            
  ├── src 
  │    └── js
  │          │── vendors  
  │          │       └── index.js  # import "./commonOrOtherName.styl"
  │          │
  │          ├── hello.js  # import "../css/hello.styl"
  │          │
  │          └── world.js  # import "../css/world.styl"
  │
  └── dist
        └── out
            └── 1.0.0
                  ├── js
                  │    ├── hello.js  
                  │    ├── world.js  
                  │    ├── common.js
                  │    └── vendors.js
                  └── css
                       ├── hello.css  
                       ├── world.css  
                       └── common.css

通过整理上述结构,并抽象出如下关系

  • vendors.js中引入的样式 => common.css
  • 业务中引入的样式 => 同名.css

JS编译关系

讲到JS,我们先切换到项目目录中的js目录下

workspace
  │            
  ├── src 
  │    └── js
  │          ├── vendors  
  │          │       └── index.js  # 在这里引入react,jquery等
  │          ├── hello.js  # 在这里敲入业务代码
  │          └── world.js  # 在这里敲入业务代码
  │
  └── dist
        └── out
            └── 1.0.0
                  └── js
                       ├── hello.js  
                       ├── world.js  
                       ├── common.js
                       └── vendors.js

通过上面这个关系图,将编译关系做如下整理

  • vendors/* => vendors.js
  • hello.js => hellow.js
  • world.js => world.js
  • 抽离业务公共部分 => common.js