Muffin=FIS+Browserify
前言
这段时间在做前端架构设计,需要选个好用的前端构建方案,之前公司网站有用过 fis-pure ,因为这次需要用到 node 环境的一些自动化测试框架,pure 不太适合,因此就萌生出 FIS 集成 Browserify 的想法。
特色
简化安装
执行 npm install -g fis-muffin 命令便可安装
多语言支持
muffin 天生支持 less、scss、coffee、react 多种语言
NPM 管理库
项目采用 npm 管理 js 库依赖,方式跟 node 完全一样,下面是 muffin-demo 的 package.json 配置;有了它,只要执行 npm install 可安装所有依赖库
"name": "muffin-demo" "version": "1.0.0" "description": "fis-muffin demo" "author": "cheft" "license": "ISC" "devDependencies": "coffee-reactify": "^2.1.0" "dependencies": "jquery": "^2.1.3" "bootstrap": "^3.3.1" "react": "^0.12.2"
如果你还要用到其它库,比如 underscore,可以用 npm install underscore --save 安装
或者你要用到其它插件,如 reactify,可以用 npm install reactify --save-dev 安装
集成 Browserify
Browserify 可以让你使用类似于 node 的 requrie 方式来实现浏览器端 JavaScript 代码模块化
// hello.js var { return 'Hello ' + name; } moduleexports = hello;
//index.js var $ = ; var hello = ; ;
muffin 默认是以 src/index.js 为入口文件,当然通过配置也可以修改
moduleexports = settings: browserify: main: 'index.coffee' // 入口文件 output: '_app.js' // browserify 输出文件,不建议修改 transform: 'coffee-reactify' // browserify 插件,可支持数组 extension: '.coffee' // browserify 所要处理的文件
browserify 支持多种插件,常用的有 coffee-reactify、reactify 等
命令简化
只需 mfn 简单命令便可发布,mfn start 即开启浏览器预览
FIS 命令 | Muffin 命令 | 作用 |
---|---|---|
fis release | mfn | 简单发布 |
fis release -w | mfn w | 发布并监视 |
fis release -wL | mfn wL | 发布并监视浏览器刷新 |
fis release -op | mfn op | 压缩打包 |
fis release -opm | mfn opm | 压缩打包并加上md5文件戳 |
fis server start | mfn start | 启动服务打开浏览器 |
fis server stop | mfn stop | 停止服务 |
fis server open | mfn open | 打开发布目录 |
fis server clean | mfn clean | 清理发布目录 |
如果上面命令不符合你的习惯,可以自己设置
moduleexports = settings: command: '': 'release -b' 'w': 'release -bw' 'wL': 'release -bwL' 'op': 'release -bop' 'opm': 'release -bopm' 'start': 'server start' 'stop': 'server stop' 'open': 'server open' 'clean': 'server clean'
CSS 模块化
不仅 js 可以模块化,css 同样可以。muffin 的静态资源目录是 assets,其中的样式文件都约定了 id。 因此在 css 或 js 中可通过 id 来引用样式文件:
/* * @require bootstrap.css */
在 coffee-script 中:
### @require todo/todo.css ###
在 html 中:
<!-- @require index.css -->
如果觉得 muffin 提供的默认配置不符合需求,也可以自己配置:
moduleexports = roadmap: path: reg : /^\/modules\/\/assets\/index\.$/i id : 'modules/$1.css' release : 'css/$1/index.css' reg : /^\/modules\/\/assets\/$/i release : 'img/$1/$2'
以上配置是将静态资源放在 modules 目录的每个模块下,每个模块自己管理静态资源;其它配置可自己扩展
性能优化
通过 mfn op 命令可将 js 打包一个文件,css 也打包一个文件;一些细碎的图片(特别是svg),建议 直接内嵌到css中,可大幅减少请求数量,提升前端性能。
图中所请求图片资源其实是内嵌在css中,具体用法可看 fis官方文档
文件监视 & 自动刷新
虽然集成了 Browserify,Muffin 也同样支持 watch 和 livereload 模式,而且速度还是很快。执行 mfn wL 命令来启用。
支持 SourceMap
开发模式中,会自动加入 sourcemap,方便调试,可直接定位到源代码,使用 mfn op 发布则会去掉 sourcemap
发布目录整理
执行 mfn deploy 可将项目输出至 ./public 目录,目录非常整洁。
自动测试
使用 Browserify 方式,一些代码可直接运行在 node 环境上;当然这样可以很轻松地模拟浏览器环境,做到自动化测试;常用的测试框架如 jest
更多特色
因为 Muffin 是基于 FIS 二次开发,所有 FIS 的功能,如:静态资源加 md5 戳 & cdn 部署 等功能都能使用;具体请查看 FIS 文档。
体验
如果你对这些 特色 感兴趣,那么就从一个简单的 demo 开始体验 muffin 吧
- 安装 muffin
npm install -g fis-muffin
- 下载 demo
git clone https://github.com/cheft/muffin-demo.git
- 进入 muffin-demo 目录,安装第三方依赖库
npm install
- 发布代码
mfn
*启动服务并打开浏览器预览
mfn start
Roadmap
- 发布三种模式的源代码 requirejs-seed 、browserify-seed、global-seed
- 更多等待您的反馈