fis 具有非常灵活的插件扩展机制，对于 react 的 jsx 也有现成的 parser 插件可用。 通过几条简单的配置，就可以在你的 fis 项目中使用 react 了。 但是在使用过程中，有一些小坑还是需要注意的，在此记录一下。

安装插件

npm install fis-parser-react -g

注意，如果你使用的 react 版本是 0.13.x， 则要安装另一个版本的插件：

npm install fis-parser-react-0.13.x -g

编译配置

编辑 fis-conf.js 文件， 加入以下内容：

// 将 jsx 文件作为文本处理
fis.config.set('project.fileType.text', 'jsx');

// 后缀名为 jsx 的文件用 fis-parser-react 插件编译
// 如果你使用的 react 版本是 0.13.x，将下面第二个参数换成 'react-0.13.x'
fis.config.set('modules.parser.jsx', 'react');

// 将 jsx 文件编译结果输出为 js 文件
fis.config.set('roadmap.ext.jsx', 'js');

模块化配置

默认情况，fis 不会将 widget 目录下的 jsx 文件包裹成 cmd 模块， 而是直接输出编译后的 js 文件。 但是我们更希望遵循 fis 的目录规范，将 widget 目录下的 jsx 文件也输出为 module， 所以我们还需要配置一下 roadmap.path。 编辑 fis-conf.js 文件， 加入以下内容：

fis.config.set('roadmap.path', [{
    reg: /^\/widget\/(.*)\.jsx$/i,
    useMap: true,
    useHash: true,
    isMod: true,
    release: '${statics}/${namespace}/widget/$1.js'
}].concat(fis.config.get('roadmap.path', [])));

最后执行 fis release 就可以看到所有的 jsx 都可以被正确编译和引用到了~

扫码关注w3ctech微信公众号