背景

  1. 当前浏览器对es6的支持不一致，且部分功能浏览器还未支持（如Module相关），因此需要引入babel转码器，转换为es5语法;

  2. fisp默认支持的前端模版bdtmpl，由于严格模式下，eval语句有其自己的作用域，因此使用babel转换的文件会出现错误，因此需要使用新的前端模板替换。错误如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    var tmpl = [function(_template_object
        /**/
    ) {
        var _template_fun_array = [];
        var fn = (function(__data__) {
            var _template_varName = '';
            for (var name in __data__) {
                _template_varName += ('var ' + name + '=__data__["' + name + '"];');
            };
            eval(_template_varName); // 严格模式下, 作用域与非严格模式不一致，导致错误
            _template_fun_array.push('');
            _template_varName = null;
        })(_template_object);
        fn = null;
        return _template_fun_array.join('');
    }][0];

引入babel

这里使用fis-parser-babel-5.x进行解析。es6文件后缀为.es6

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
fis.config.merge({
    project: {
        fileType: {
            text: 'es6'
        }
    },
    modules: {
        parser: {
            es6: 'babel-5.x'
        }
    },
    settings: {
        parser: {
            'babel-5.x': {
                blacklist: ['regenerator'],
                optional: ['asyncToGenerator'],
                sourceMaps: true,
                stage: 3
            }
        }
    },
    roadmap: {
        ext: {
            es6: 'js'
        }
    }
}

项目模块化加载器使用的mod.js，其为amd标准的不完全实现。babel默认的模块编译标准为common，不会为文件包裹上define。尝试将setting.parser['babel-5.x']中将modules设置为amd，但无效，因此需要在fis-conf.js为模块进行amd包装。

1
2
3
4
5
6
fis.config.get('roadmap.path').unshift({
    reg: /.*\.es6$/i,
    useMap: true,
    useHash: true,
    isMod: true
});

替换前端模版

这里使用fis-parser-template来解析模版文件，语法参考template.js。 项目中bdtmpl的文件后缀为.tmpl，为避免与之冲突，这里使用.wtpl作为es6文件的前端模版后缀。fis-conf.js做以下配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
fis.config.merge({
    project: {
        fileType: {
            text: 'es6, wtpl'
        }
    },
    modules: {
        parser: {
            es6: 'babel-5.x',
            wtpl: 'template'
        },
    },
    settings: {
        parser: {
            'babel-5.x': {
                blacklist: ['regenerator'],
                optional: ['asyncToGenerator'],
                sourceMaps: true,
                stage: 3
            },
            'template': {
                sTag: '<#',
                eTag: '#>',
                global: 'template'
            }
        }
    },
    roadmap: {
        ext: {
            es6: 'js'
        }
    }
}

然后，需要在页面中引入template.js，不使用umd包装，将其暴露在window上。如下修改：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
;(function(root, factory) {
    var template = factory(root);
    // if (typeof define === 'function' && define.amd) {
    //    // AMD
    //    define('template', function() {
    //        return template;
    //    });
    // } else if (typeof exports === 'object') {
    //    // Node.js
    //    module.exports = template;
    // } else {
        // Browser globals
        var _template = root.template;
        template.noConflict = function() {
            if (root.template === template) {
                root.template = _template;
            }
            return template;
        };
        root.template = template;
    // }
}(this, function(root) { ... }

最后，需要配置fis-conf.js，使所有.wtpl拥有js相关扩展，否则通过__inline()引入后，是个纯字符串。

1
2
3
4
fis.config.get('roadmap.path').unshift({
    reg: /.*\.wtpl$/i,
    isJsLike: true
})

注意

fis编译机上已安装所需要的fis-parser-babel-5.x和fis-parser-template插件，所以不用在本地编译啦~