打包工具之样式即时编译

[xinglie]

分类

在magix项目中，样式被分为以下3大类

view样式

view样式是配合当前区块而存在的样式，编辑器会对样式内容做编译，样式范围仅在当前view中生效，不会影响到其它view。

在javascript文件中，通过applyStyle进行关联，如

import Magix5 from 'magix5';
Magix5.applyStyle('@:./user.less');

如果样式文件中定义的样式没有被使用，则编译器会给出提示，同样的，如果html中按一定规则找不到选择器定义在哪个样式文件中，同样会给出提示

项目全局样式

通过对编译器配置scopedCss，指定当前项目中使用的全局样式，这个全局样式是会被编译器编译转换的。
如

magixConposer.config({
    scopedCss: [
        './tmpl/g.less',
        './tmpl/app/test.css'
    ]
});

这个样式文件之所以要提前通过配置的方式告诉编译器是因为：编译器需要对整个项目作编译后，才能给出哪些样式没有被使用到，或html中使用了哪些未声明的样式，因此在编译之前就需要知道哪些文件是项目级别的全局样式

全局样式

全局样式是不被编译器编译处理的样式。即当前项目中可能通过link标签引入了其它样式文件，但对于编译器来讲是不知道的，编译器照例会对项目中的html文件编译处理，在遇到编译器认为未定义的样式时，会给出提示。

例：
用户在入口页面自行引入了bootstrap.css，然后在某个view中使用如col-md-4

<div class="col-md-4">

</div>

对于编译器来讲，通过前面讲的项目的全局样式及view附属的样式如果找不到col-md-4，则认为用户使用了未定义的选择器。毕竟编译器在这种情况下是不清楚用户到底是写错了，还是在引用一个全局样式，但为了安全，编译器会给出提示。

开发者可以忽略这个提示，也可以进行配置，忽略掉一些提示，如

magixComposer.config({
    checker:{
        tmplClassCheck(selector) {
            return !selector.startsWith('mx5-');
        }
    }
});

如果编译器找不到样式的定义，且不为mx5-开头的样式规则，则进行提示

前面所讲的都是先定义后使用的方式，即开发者要先创建样式文件，书写样式规则后，在html中使用。而现在的开发中，样式越来越多的倾向到原子化的规则上来，同时可以通过原子化的名称，反推出样式内容，样式的即时编译也将成为主流，magix-composer现已支持样式的却时编译

即时编译

即时编译无须创建、书写样式规则后再使用，而时直接使用，由编译器反推出样式内容。先使用后定义。

即时编译更自由，同时维护也更方便，比如一些模块中部分html下线，如果使用即时编译，则只需要删除html即可，如果像之前的先定义后使用，则需要自己去相应的样式文件中，删除关联的样式。

即时编译只需要记住原子化的规则，或反推样式内容的规则即可，而之前的先定义后使用，每次使用样式时，如果不确定有没有定义，则需要自己去相应的样式文件中查找。

那么在magix项目中如何使用样式的即时编译呢？

通过前面所讲的样式分类，编译器会对样式及html的使用进行检测，只有无法找到定义的样式时，才会走即时编译。

编译器会通过cssJITGenerator钩子抛出无法识别的样式规则，外部根据样式名称，返回相应的样式内容即可，如

magixComposer.config({
    cssJITGenerator(selector){
        if(selector=='bg-white'){
             return `.${selector}{background-color:#fff}`;
        }
        return false;
    }
});

我们对cssJITGenerator返回值进行讨论下
如果cssJITGenerator返回true，表示无须对这个选择器生成相应的内容，同时也不需要进行检测提示。如果返回false、null、undefined或空字符串，则表示无法对这个选择器生成相应的内容，同时编译器在编译结束时，会给出检测提示，提示开发者进行修改。其它字符串内容则表示根据选择器生成了相应的样式规则。

即时编译仅对无法处理的样式名称做处理

如下示例

/*user.css*/
.bg-white{
    background-color:#fff;
}

<!--user.html-->
<div class="bg-white">
</div>

//user.ts
import Magix5 from'magix5';
let {applyStyle,View}=Magix5;
applyStyle('@:./user.css');
export default View.extend({
    tmpl:'@:./user.html',
});

在user.html中，使用的bg-white因为在user.css可以找到，则不会走即时编译。

暂时无法解决的问题

1. 用户需要拼接一部分名称，如<div class="bg--{{=type}}"></div> 这种情况很难反推相应的样式
2. 开发者需要写较多的原子化名称，感觉和在style中写原生规则差不太多，看原子化名称怎么定义及反推样式规则
3. 无法把多个文件重复名称自动提取成项目全局样式