同步svg，将项目用到的svg，通过iconfont平台同步到项目目录
接入字体相关的css问题
html引入css文件
单文件编译处理iconfont
大体的逻辑是：
遍历项目目录下的所有svg，生成字体文件
生成css
所有业务html引入css
配置：
fis.match('/*.html', {
preprocessor: fis.plugin('iconfont', {
svgPath: '../svgs',
output: 'modules/common/fonts'
})
})
对根目录下的所有html应用组件，编译一次svg，生成字体文件，然后对业务html引入css文件。
其实要支持这种技术选型非常简单，加上如下配置到 fis-conf.js 即可。（请注意看注释）第一步：配置支持 es6 和 jsx 语法。
// 让 modules 目录下面的 js 和 jsx 通过 typescript
fis.match('{/modules/**.js,*.jsx}', {
// 要支持 es6 和 jsx， typescript 也能胜任，最主要是编译速度要快很多。
parser: fis.plugin('typescript'),
// typescript 就是编译速度会很快，但是对一些 es7 的语法不支持，如果你觉得不爽，可以用 babel 来解决。用以下内容换掉 typescript 的parser配置就好了。
// parser: fis.plugin('babel-5.x', {
// sourceMaps: true,
// optional: ["es7.decorators", "es7.classProperties"]
// }),
rExt: '.js'
})
第二步：配置支持 npm 模块查找
fis.unhook('components')// fis3 中预设的是 fis-components，这里不需要，所以先关了。
fis.hook('node_modules')// 使用 fis3-hook-node_modules 插件。
第三步：页面中引入 mod.js ，标记目标模块化文件，启用 loader 插件，然后就可以随意 import 模块了。
<!DOCTYPE html>
<html>
<head>
<title>Redux TodoMVC example</title>
<link rel="stylesheet" type="text/css" href="/static/index.css" />
<script type="text/javascript" src="./static/mod.js"></script>
</head>
<body>
<div class="todoapp" id="root">
</div>
<script type="text/javascript">
// 注意看 fis-conf.js 中 commonjs 的配置，已经把 /modules 目录放入 baseUrl 中，所以可以直接找到 ./modules/index.jsx
require(['./index'])
</script>
</body>
</html>
// 设置成是模块化 js, 编译后会被 define 包裹。
fis.match('/{node_modules,modules}/**.{js,jsx}', {
isMod: true
})
fis.match('::package', {
// 本项目为纯前段项目，所以用 loader 编译期加载，
// 如果用后端运行时框架，请不要使用。
postpackager: fis.plugin('loader', {
useInlineMap: true
})
})
到此，已经可以快速的开发项目了
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）