编译插件使用.md

编译插件使用

feather2中使用插件会比fis3中更加容易一些，具体插件可直接在fis3官网直接搜索

下面列举几个例子

vue

react

首先安装插件

npm install fis-parser-reactjs

修改conf/conf.js

//增加js的后缀可以为jsx
feather.config.set('project.fileType.js', 'jsx');
//匹配到文件后缀为jsx的文件，都使用reactjs编译
feather.match('**.jsx', {
    parser: require('fis-parser-reactjs')
})

在项目中使用

static/1.jsx

/*@jsx  注意，这个标识必须存在，否则无法编译，插件要求而已，此标识不是所有插件需要的，只是fis-parser-reactjs插件所需要的，这里不要误解*/
ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);

//module.exports = xxx;

index.html

<script>
require.async('static/1.jsx', function(){
    //do something
});
</script>

刷新页面查看效果

输出

define('static/1.jsx', function(require, exports, module){
/*@jsx*/

var HelloMessage = React.createClass({displayName: "HelloMessage",
    render: function() {
        return React.createElement("div", null, "Hello ", this.props.name);
    }
});
 
React.renderComponent(
    React.createElement(HelloMessage, {name: "John"}),
    document.getElementById('container')
);
});

es6

安装插件

npm install fis-parser-es6-babel

修改conf/conf.js

//增加js的后缀可以为es6
feather.config.set('project.fileType.js', 'es6');
feather.match('**.es6', {
    parser: require('fis-parser-es6-babel')
})

在项目中使用

static/1.es6

[1,2,3].map(n => n + 1);

index.html

<script>
require.async('static/1.es6', function(){
    //do something
});
</script>

刷新页面查看效果

markdown

npm install fis-parser-marked

pagelet下的所有文件 使用markdown语法
feather.match('pagelet/**.html', {
    parser: require('fis-parser-marked')
});

自己开发插件

feather.match('**.js', {
    parser: function(content, file, options){
        return '/*lalalal*/' + content;
    }
})