前端构建神器FIS3 - 推酷
前端构建神器FIS3
一直想着要是有一款工具能够轻松解决构建流程就OK了，直到遇到
FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）、模块化开发、自动化工具、开发规范、代码部署等问题。
的功能很实在，具体，代码简介。下面说说我觉得最喜欢的功能：
mock 假数据模拟
默认情况下，在你的项目的根目录下需要新建
config和test
目录，以便存放假数据和配置。在
目录中，新建
sample.json
并存放内容，然后在配置文件中指定请求的
server.config
rewrite ^\/api\/user$ /test/sample.json
指定的是根目录下的
，重新映射到我们测试的文件。
而我们修改
server.conf
目录，需要在
fis-conf.js
fis.match('/test/**', {
release: '$0'
fis.match('/test/server.conf', {
release: '/config/server.conf'
当然这是静态的json文件，我们更多的是模拟接口请求，记得以前听别人介绍使用的
模拟请求返回结果，而fis3实质也是通过node实现，不过不是很熟悉node的同学直接去写node实现有点困难，来看看fis3如何实现：
server.conf
中指定接口的映射，
rewrite ^\/api\/dynamic\/time$ /test/dynamic.js
dynamic.js
中实现返回的数据就可以了，
module.exports = function(req, res, next) {
res.write('Hello world ');
// set custom header.
// res.setHeader('xxxx', 'xxx');
res.end('The time is ' + Date.now());
然后直接输入地址查看请求:
http://127.0.0.1:8080/api/dynamic/time
记得之前使用
webpack-server-dev
插件时，也是可以达到这种实时刷新浏览器的效果，但实现起来比fis3复杂。
fis3实现步骤：
构建项目到本地默认服务器运行目录
fis3 release
不指定path即可。可输入
fis3 server open
打开这个目录。
fis3 server start
启动项目，会自动打开浏览器。
fis3 release -wL
，文件修改自动构建发布后，浏览器能自动刷新。
发布到远端机器
到测试服务器也是一种不错的体验，虽然我觉得用的地方不多。
嵌入资源即内容嵌入，可以为工程师提供诸如图片base64嵌入到css、js里，前端模板编译到js文件中，将js、css、html拆分成几个文件最后合并到一起的能力。有了这项能力，可以有效的减少http请求数，提升工程的可维护性。 fis不建议用户使用内容嵌入能力作为组件化拆分的手段，因为声明依赖能力会更适合组件化开发。
html中嵌入图片base64
html中嵌入样式文件
html中嵌入脚本资源
html中嵌入页面文件，
&link rel=&import& href=&demo.html?__inline&&
还有包括在js中嵌入资源，在css中嵌入资源等等。
基本的构建
可以使用sass，less语法，需要安装插件：
npm install -g fis-parser-sass
在配置文件中配置:
fis.match('*.scss', {
parser: fis.plugin('sass'),
rExt: '.css'
合并页面请求的散列文件，比如将多个css文件合并成一个：
npm install -g fis3-postpackager-loader
fis.match('::packager', {
postpackager: fis.plugin('loader', {
//基于页面的打包方式
allInOne: true
很明显，这里用到了
allInOne: true
，就不会对所有的css文件进行合并，而是将该页面用到的css进行合并，并且不用指定合并的路径。
如果没有加这个属性，就需要指定文件的合并输出路径：
fis.match('*.{css,sass}', {
packTo: '/static/aio.css'
fis.match('*.js', {
packTo: '/static/aio.js'
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致fis3 文档学习研究 - 腾讯Web前端 IMWeb 团队社区 | blog | 团队博客
已有账号，立即登录
通过以下账号登录：
imweb是真人前端社区，填写公司信息能帮助你更好的提升业内影响力。
公司邮箱仅作一次性的验证使用，您不必担心信息泄露与垃圾邮件。
如今，他们已入驻imweb：
填写公司信息
自由职业者，学生，或待业中?
返回上一步
(1515浏览)
(1798浏览)
(3373浏览)
本文作者：imweb ouven
原文出处：
未经同意，禁止转载
安装初始化
类似Gruntfile.js或Gulpfile.js，新建fis-config.js文件
配置api介绍如下：
fis.set(key, value)
设置一些配置，如系统内置属性 project、namespace、modules、settings。 fis.set 设置的值通过fis.get()获取
fis.get(key)
获取已经配置的属性，和 fis.set() 成对使用
fis.match(selector, props, [, important])
给匹配到的文件分配属性，文件属性决定了这个文件进行怎么样的操作；fis.match 模拟一个类似 css 的覆盖规则，负责给文件分配规则属性，这些规则属性决定了这个文件将会被如何处理；另外，后面分配到的规则会覆盖前面的；
.match('{a,b}.js', {
release: '/static/\$0'
.match('b.js', {
release: '/static/new/\$0'
这里b.js的输出为 /static/new/$0，如果important为true则规则不能被覆盖
fis.media(mode)
fis.media 是模仿自 css 的 ，表示不同的状态。这是 fis3 中的一个重要概念，其意味着有多份配置，每一份配置都可以让 fis3 进行不同的编译；
.media('dev').match('*.js', {
optimizer: null
.media('rd').match('*.js', {
domain: 'http://rd-host/static/cdn'
fis.plugin(name, [props, [, place]])
--几种重要属性设置
全局属性介绍：
var DEFAULT_SETTINGS = {
project: {
charset: 'utf8',
//字符编码，@param: string
md5Length: 7,
//md5长度， @param: number
md5Connector: '_',
//设置md5与文件的连接字符，@param: string
files: ['**'],
//设置项目源码文件过滤器，@param:
ignore: ['node_modules/**', 'output/**', '.git/**', 'fis-conf.js']
//排除某些不处理的文件
fileType:{
text: ['html', 'js'],
//追加文本文件后缀列表，@param: array | string
image: ['png']
//最佳图片类二进制文件后缀列表，@param: array | string
// project的属性也可以通过 fis.set('project.charset', 'utf8') 来设置，其它的类似
component: {
skipRoadmapCheck: true,
protocol: 'github',
author: 'fis-components'
modules: {
hook: 'components',
packager: 'map'
options: {}
文件属性：
fis.set('timeDate', Date.now())
fis.match('/widget/{*,**/*}.js', {
charset: 'utf8',
//指定文本文件的输出编码。@param: string
url: '/static/proj/pkg_widget.js', //指定文件的资源定位路径，以 / 开头。默认是 release 的值，url可以与发布路径 release 不一致。@param: string
release: '/static/$0',
//设置文件的产出路径。设置为false表示不生成文件,@param: string
packTo: '/static/pkg_widget.js',
//分配到这个属性的文件将会合并到这个属性配置的文件中,@param: string
query: '?=t' + fis.get('timeDate'),
//指定文件的资源定位路径之后的query，比如'?t='。@param: string
isHtmlLike: true,
//指定对文件进行 html 相关语言能力处理.@param: bool
isCssLike: true,
//指定对文件进行 css 相关的语言能力处理.@param: bool
isJsLike: true,
//指定对文件进行 js 相关的语言能力处理
useSameNameRequire: true,
//开启同名依赖.@param: bool
requires:[
//默认依赖的资源id表
''static/lib/jquery.js''
//在[静态资源映射表][]中的附加数据，用于扩展[静态资源映射表][]表的功能。@param: object
isPage: true
fis.match('/widget/mod.js', {
packOrder: -100,
//用来控制合并时的顺序，值越小越在前面。配合 packTo 一起使用。@param:number
fis.match('/widget/jquery.js', {
//使用 var $ = require('jquery')
id: 'query',
//指定文件的资源id。默认是 namespace + subpath 的值,@param: string
moduleId: 'jquery',
//指定文件资源的模块id。在插件fis3-hook-module里面自动包裹define的时候会用到，默认是 id 的值。@param: string
isMod: true
//标示文件是否为组件化文件。@param: bool
fis.media('prod').match('*.css', {
useHash: true,
//是否携带md5戳。@param: true
domain: '',
//给文件 URL 设置cdn替换前缀。@paran: string
fis.match('*.less', {
rExt: '.css'
//设置最终文件产出后的后缀.@param: string
userMap: true,
//文件信息是否添加到 map.json,用于处理声明依赖，后面会讲到。@param: bool
插件配置属性：
.match('*.js', {
: .plugin('js', {
.match('*.less', {
parser: fis.plugin('less'),
rExt: '.css'
.match('*.sass', {
parser: fis.plugin('sass'),
rExt: '.css'
.match('*.{css,less}', {
paser: fis.plugin('image-set')
.match('::package', {
packager: fis.plugin('map'),
spriter: fis.plugin('csssprites')
.media('prod').match('::package', {
spriter: fis.plugin('csssprites')
.match('**', {
: .plugin('http-push', {
receiver: 'http://target-host/receiver.php',
to: '/home/work/www'
当然更多插件可以查看
通过插件我们就可以使用一些基础功能的组合了：
.match('*.{js,css,png}', {
useHash: true
.match('::package', {
: .plugin('csssprites')
.match('*.css', {
useSprite: true
.match('*.js', {
optimizer: fis.plugin('uglify-js')
.match('*.css', {
optimizer: fis.plugin('clean-css')
.match('*.png', {
optimizer: fis.plugin('png-compressor')
如果开发阶段有时不需要那么多处理流程可以禁用某些功能：
.media('debug').match('*.{js,css,png}', {
useHash: false,
useSprite: false,
optimizer: null
三、调试与发布
FIS3 构建后，默认情况下会对资源的 URL 进行修改，改成绝对路径。同样FIS3 内置一个简易 Web Server，可以方便调试构建结果。
1、开启server到内置server调试目录
fis3 server open
2、发布到内置server发布目录
fis3 release
3、文件监听
fis3 release -w
fis3 release -wL
4、发布配置
发布只需要配置就可以完成
.match('*', {
: .plugin('http-push', {
receiver: 'http://cq.01.p.:8888/receiver.php',
to: '/home/work/htdocs'
四、内置功能
4.1 嵌入资源
html和css中内嵌只需要在引用加载的文件后面加上__inline就可实现:
title="百度logo" src="images/logo.gif?__inline"/&
rel="stylesheet" type="text/css" href="demo.css?__inline"&
type="text/javascript" src="demo.js?__inline"&&
rel="import" href="demo.html?__inline"&
@import url('demo.css?__inline');
js中内嵌资源稍有点不同：
__inline('demo.js')
var img = __inline('images/logo.gif')
var css = __inline('a.css')
4.2 资源定位
其实官方文档讲了很多，但很简单，主要是在没有inline的条件下将内嵌的资源处理后加上后缀，放入到相对应的发布目录中自动定位。
var img = __uri('images/logo.gif');
var img = '/static/pic/logo_74e5229.gif';
4.3 声明依赖
html中声明依赖。用户可以在html的注释中声明依赖关系，这些依赖关系最终会被记录下来，当某个文件中包含字符 RESOURCE_MAP 那么这个记录会被字符串化后替换 RESOURCE_MAP。
例如index.html中含有并且设置了useMap：
.match('*.html', {
useMap: true
那么发布后会产生如下manifest.json文件：
"index.html" : {
"uri" : "/index.html",
"type" : "html",
"deps" : [ "demo.js", "demo.css" ]
"pkg" : {}
同样js和css中的配置方式和html中完全一致
五、工作原理
1. 构建流程
FIS3 是基于文件对象进行构建的，每个进入 FIS3 的文件都会实例化成一个 File 对象，整个构建过程都对这个对象进行操作完成构建任务。一个文件的构建流程分为三个阶段：
扫项目目录拿到文件并初始化出一个文件对象的列表，列表包含需要处理文件的文件对象
对文件对象中每一个文件进行单文件编译
获取用户设置的 package 插件，进行打包处理（包括合并图片）
单文件进行处理的流程依次为：lint -& parser -& preprocessor -& standard -& postprocessor -& optimizer。正如上面所配置的，这六个过程可以通过配置插件来定义我们最终想要的结果。例如，
lint 代码校验检查，比较特殊，所以需要 release 命令命令行添加 -l 参数
parser 预处理阶段，比如 less、sass、es6、react 前端模板等都在此处预编译处理
preprocessor 标准化前处理插件
standard 标准化插件，处理内置语法
postprocessor 标准化后处理插件
2. File对象
当一个文件被实例化为一个 File 对象后，包括一些文件基本属性，如 filename、realpath 等等，当这个文件被处理时，FIS3 还会把用户自定义的属性 merge 到文件对象上。例如
.match('a.js', {
myProp: true
fis将给这个a.js加上myPorp属性，有点类似与gulp的pipe处理。
六、用fis3进行项目开发
1. 插件使用
npm install -g 插件名 可以用来安装fis插件，插件列表见
配置调试使用见上文的配置，fis3内置的插件如下，有这些觉得基本可以用来开发一个正式项目了。
fis-optimizer-clean-css
fis-optimizer-png-compressor
fis-optimizer-uglify-js
fis-spriter-csssprites
fis3-deploy-local-deliver
fis3-deploy-http-push
fis3-hook-components
fis3-packager-map
2. 插件编写
不到万不得已不要去扩展插件，用到的时候再说吧，fis3扩展了些插件，99%能满足开发需要。
3. 模块化开发
进行模块化开发首先安装npm install -g fis3-hook-module
fis.hook('module');
fis.hook('module', {
mode: 'amd'
fis.match('/module/*.js', {
isMod: true
2. 项目开发基本规范
├── page
└── index.html
├── static
└── lib
├── test
└── widget
├── static
├── template
└── test
还是一些测试数据、用例
foo/bin/foo.js
foo/index.js
package.json
基于 FIS3 配置目录规范和部署规范的配置文件编写：
fis.match('*', {
release: '/static/$0'
fis.match('*.html', {
release: '/template/$0'
fis.match('/widget/**/*', {
isMod: true
fis.match('/widget/**/*.js', {
postprocessor: fis.plugin('jswrapper', {
type: 'commonjs'
fis.match('/test/**/*', {
release: '$0'
fis.media('prod')
.match('*.js', {
optimizer: fis.plugin('uglify-js', {
expect: ['require', 'define', 'some string']
.match('*.css', {
optimizer: fis.plugin('clean-css', {
'keepBreaks': true
fis.media('prod')
.match('::package', {
packager: fis.plugin('map'),
spriter: fis.plugin('csssprites', {
layout: 'matrix',
margin: '15'
.match('*.js', {
packTo: '/static/all_others.js'
.match('*.css', {
packTo: '/staitc/all_others.js'
.match('/widget/**/*.js', {
packTo: '/static/all_comp.js'
.match('/widget/**/*.css', {
packTo: '/static/all_comp.css'
实现 /bin/foo.js
var Liftoff = require('liftoff');
var argv = require('minimist')(process.argv.slice(2));
var path = require('path');
var cli = new Liftoff({
name: 'foo',
processTitle: 'foo',
moduleName: 'foo',
configName: 'fis-conf',
extensions: {
'.js': null
cli.launch({
cwd: argv.r || argv.root,
configPath: argv.f || argv.file
}, function(env) {
if (!env.modulePath) {
fis = require('../');
fis = require(env.modulePath);
fis.set('system.localNPMFolder', path.join(env.cwd, 'node_modules/foo'));
fis.set('system.globalNPMFolder', path.dirname(__dirname));
fis.cli.run(argv, env);
七、必须掌握的
命令行 fis3
fis3 release [-d path]
fis3 install 插件名
fis3 server [start | stop | restart | open | info ]
fis3 inspect
大概fis3文档的内容全部覆盖了，只有插件编写没有去深究。感觉整体能应对我们平时遇到的99%的问题。后面也靠fis团队更新插件了，至于缺少方便的插件的开发环境这点，个人觉得不到万不得已不要自己去造轮子，fis2很多插件缺少可以理解，后面还是尽量不要自己去造插件了。fis3工程化中的模块化开发
经历过杂乱的js函数式编程的人在认识了模块化和模块加载器之后，一定觉得是一种福音。模块化让我们更加有组织有模块地去编写我们的代码，模块化加载器让我们更加方便和清晰地进行模块定义和依赖管理。现在主要的模块化规范是commonJS，AMD和CMD，commonJS主要是用于node服务端，AMD和CMD主要用于浏览器端，代表框架分别是requireJS和seaJS；作为前端，当然更熟悉的是requireJS和seaJS，但是对于我个人而言，commonJS的编码方式我更喜欢，因为简单，无需使用define包装。
如今，要特别感谢前端工程化的出现，让commonJS的编码方式在前端变成可能，比如我们熟悉的Browserify，当然作为国内最强大的前端工程化工具——fis，当然也对模块化也有自己的实现。下面我们来学习一下fis3是如何实现模块化构建的。当然你也可以直接阅读官方文档： fis3模块化
模块化框架一般包含了模块的依赖分析、模块加载并保持依赖顺序等功能。但在 FIS 中，依赖本身在构建过程中就已经分析完成，并记录在静态资源映射表中，那么对于线上运行时，模块化框架就可以省掉依赖分析这个步骤了。
fis3中针对前端模块化框架的特性自动添加define包装，以及根据配置生成对应的require依赖标识主要是通过对应的模块化插件实现的：
fis3-hook-commonjs
fis3-hook-amd
fis3-hook-cmd
生成了规范的模块文件之后，如何将模块之间的依赖关系生成静态资源映射表，则是通过
fis3-postpackager-loader 。
这个插件用于分析页面中使用的和依赖的资源（js或css）, 并将这些资源做一定的优化后插入页面中。
下面我们结合栗子来学习一下这些模块化插件是如何工作的。先看看我们专题页项目的目录结构！
static/ #项目静态文件目录
common/ #公共静态文件目录
lib/ #类库文件
require.js
mod/ #需要模块化的文件
css/ #css文件目录
images/ #图片文件目录
commponents/ #公共组件，也是需要模块化加载的
HelloMessage/
HelloMessage.jsx
HelloMessage.css
helloworld/ #简单的例子
index.html
index.jsxfis-conf.js #fis配置文件
package.json #包配置文件
commonJS模块化
在浏览器环境运行的代码，如果我们希望采用commonJS规范作为模块化开发，则需要安装 fis3-hook-commonjs 插件， npm install fis3-hook-commonjs --save ，还要配合 mod.js 来使用；
安装完成之后看一下fis-conf.js如何配置：
###fis-conf.js/*设置编译范围*/fis.set('project.files', ['static/**']);
/*设置发布路径*/fis.match(///static//(.*)/i, {
release: '/staticPub/$1', /*所有资源发布时产出到 /staticPub 目录下*/
url: '/staticPub/$1' /*所有资源访问路径设置*/});/*指定模块化插件*/fis.hook('commonjs', {
jquery: '/static/common/js/mod/jquery', //设置jquery别名
react: '/static/common/js/mod/react' //设置react别名
}});/*指定哪些目录下的文件执行define包裹*/fis.match('/static/common/js/mod/**', {
isMod: true});fis.match('/static/common/components/**', {
isMod: true});fis.match('/static/helloworld/**', {
isMod: true});/*模块化加载器配置*/fis.match('::package', {
postpackager: fis.plugin('loader', {
allInOne: true, //js&css打包成一个文件
sourceMap: true, //是否生成依赖map文件
useInlineMap: true //是否将sourcemap作为内嵌脚本输出
})});/*支持react*/fis.match('*.jsx', {
rExt: '.js',
parser: fis.plugin('react', {})});
注意：需要对目标文件设置 isMod 属性，说明这些文件是模块化代码。这样才会被自动加上define包装，才能在浏览器里面运行。 fis3-postpackager-loader 的作用则是分析这些文件的依赖关系并生成对应的sourceMap文件，让mod.js分析并加载模块对应的文件到浏览器中。
#helloworld/index.html&!DOCTYPE html&
&title&繁星网 | 全球最大音乐现场直播平台&/title&
&meta charset=&utf-8&&
&link rel=&stylesheet& type=&text/css& href=&/static/common/css/style.css&&
&link rel=&stylesheet& type=&text/css& href=&./css/index.css&&&/head&
&div id=&helloApp&&&/div&&/body&
&script type=&text/javascript& src=&/static/common/js/lib/mod.js&&&/script&
&script type=&text/javascript&&
require(['./index']);//异步加载index.js模块
&/html&#helloworld/index.jsx//引入React和HelloMessage模块var React = require('react');
var HelloMessage = require('/static/common/components/HelloMessage/HelloMessage.react');
React.render(
&HelloMessage message=&I like commonjs!& /&,
document.getElementById('helloApp'));#common/components/HelloMessage/HelloMessage.react.jsxvar React = require('react');
var HelloMessage = React.createClass({
render: function() {
&h1&Hello, {this.props.message}&/h1&
}});module.exports = HelloM
helloworld/index.html需要引入mod.js作为模块化加载器，然后通过require([./index])异步加载index模块；
helloworld/index.jsx依赖React和HelloMessage模块，写法就是我们熟悉的commonJS的方式；
common/components/HelloMessage/index.jsx就是HelloMessage模块，它也依赖React模块；
从上面的jsx文件我们可以轻易地发现，不管是react还是jsx文件都没有任何define包装，写法就commonJS一模一样，但是这样在浏览器肯定是跑不起来的，还需要fis帮我们构建模块包装和依赖分析。OK，一切准备就绪，我们就开始执行fis脚本：
fis3 release -d ./
我们来看看staticPub目录下面产出的编译文件：
#helloworld/index.html&!DOCTYPE html&
&!DOCTYPE html&
&title&繁星网 | 全球最大音乐现场直播平台&/title&
&meta charset=&utf-8&&
&link rel=&stylesheet& type=&text/css& href=&/staticPub/helloworld/index.html_aio.css& /&&/head&
&div id=&helloApp&&&/div&
&script type=&text/javascript& src=&/staticPub/common/js/lib/mod.js&&&/script&
&script type=&text/javascript&&/*resourcemap*/
require.resourceMap({
&static/common/js/mod/react&: {
&url&: &/staticPub/common/js/mod/react.js&,
&type&: &js&
&static/common/components/HelloMessage/HelloMessage.react&: {
&url&: &/staticPub/common/components/HelloMessage/HelloMessage.react.js&,
&type&: &js&,
&static/common/js/mod/react&
&static/helloworld/index&: {
&url&: &/staticPub/helloworld/index.js&,
&type&: &js&,
&static/common/js/mod/react&,
&static/common/components/HelloMessage/HelloMessage.react&
require(['static/helloworld/index']);//异步加载index.js模块
&/script&&/body&
我们来看看有哪些变化：
1、index.html中css文件被打包成一个
&link rel=&stylesheet& type=&text/css& href=&/static/common/css/style.css&&
&link rel=&stylesheet& type=&text/css& href=&./css/index.css&&
变成了一个
&link rel=&stylesheet& type=&text/css& href=&/staticPub/helloworld/index.html_aio.css& /&
2、上面的index.html多了一份sourceMap脚本；
这是因为在fis3-postpackager-loader的配置中加了useInlineMap:true，可以阅读 文档 了解更多配置。
我们再来看看helloworld/index.jsx和HellowMessage/HelloMessage.react.jsx的变化：
#hellowrold/index.jsdefine('static/helloworld/index', function(require, exports, module) {
//引入React和HelloMessage模块
var React = require('static/common/js/mod/react');
var HelloMessage = require('static/common/components/HelloMessage/HelloMessage.react');
React.render(
React.createElement(HelloMessage, {message: &I like commonjs!&}),
document.getElementById('helloApp')
);});#common/components/HelloMessage/HelloMessage.react.jsdefine('static/common/components/HelloMessage/HelloMessage.react', function(require, exports, module) {
var React = require('static/common/js/mod/react');
var HelloMessage = React.createClass({displayName: &HelloMessage&,
render: function() {
React.createElement(&h1&, null, &Hello, &, this.props.message)
module.exports = HelloM});#common/js/mod/react.jsdefine('static/common/js/mod/react', function(require, exports, module) {
//react code...}
1、所有的.jsx变成了.js文件，这是fis3-parser-react插件做的；
2、js文件都加了define包装，比如&static/helloworld/index&是index模块的moduleId;
3、require('react')编译成了require('static/common/js/mod/react')，因为我们通过path配置了别名； 我们可以发现，通过fis生成的js代码define的moduleId跟index.html中sourceMap的moduleId是一致的。这样mod.js就能通过resourceMap的依赖关系加载到所有的模块啦！下面是demo在浏览器中的运行结果截图：
以上就是通过fis3-hook-commonjs实现模块化的过程，当然插件还有一些配置项供开发人员配置，感兴趣的同学可以通过阅读 fis3-hook-commonjs 的文档自行了解。
首先安装 fis3-hook-amd 插件， npm install fis3-hook-amd --save 。 如果我们理解fis3-hook-commonjs的使用方式，换成fis3-hook-amd就很简单，使用方式的唯一的不同就是hook的插件由commonjs变为amd：
fis.hook('amd', {
jquery: '/static/common/js/mod/jquery',
react: '/static/common/js/mod/react'
当然此时我们的模块化框架要用require.js啦！所以index.html我们要把mod.js换成require.js。
&script type=&text/javascript& src=&/static/common/js/lib/require.js&&&/script&
执行fis3编译：
fis3-release -d ./
下面我们看看编译之后的产出文件：
#helloworld/index.html&!DOCTYPE html&
&title&繁星网 | 全球最大音乐现场直播平台&/title&
&meta charset=&utf-8&&
&link rel=&stylesheet& type=&text/css& href=&/staticPub/helloworld/index.html_aio.css& /&&/head&
&div id=&helloApp&&&/div&
&script type=&text/javascript& src=&/staticPub/common/js/lib/require.js&&&/script&
&script type=&text/javascript&&/*resourcemap*/
require.config({paths:{
&static/common/js/mod/jquery&: &/staticPub/common/js/mod/jquery&,
&static/common/js/mod/react&: &/staticPub/common/js/mod/react&,
&static/common/components/HelloMessage/HelloMessage.react&: &/staticPub/common/components/HelloMessage/HelloMessage.react&,
&static/helloworld/index&: &/staticPub/helloworld/index&
require(['static/helloworld/index']);//异步加载index.js模块&/script&
&/html&#helloworld/index.jsdefine('static/helloworld/index', ['require', 'exports', 'module', 'static/common/js/mod/react', 'static/common/components/HelloMessage/HelloMessage.react'], function(require, exports, module) {
//引入React和HelloMessage模块
var React = require('static/common/js/mod/react');
var HelloMessage = require('static/common/components/HelloMessage/HelloMessage.react');
React.render(
React.createElement(HelloMessage, {message: &I like AMD!&}),
document.getElementById('helloApp')
);});#common/components/HelloMessage/HelloMessage.jsdefine('static/common/components/HelloMessage/HelloMessage.react', ['require', 'exports', 'module', 'static/common/js/mod/react'], function(require, exports, module) {
var React = require('static/common/js/mod/react');
var HelloMessage = React.createClass({displayName: &HelloMessage&,
render: function() {
React.createElement(&h1&, null, &Hello, &, this.props.message)
module.exports = HelloM});
注意，index.html内嵌脚本生成的sourceMap变成下面的格式，因为是AMD规范嘛：
require.config({paths:{
&static/common/js/mod/jquery&: &/staticPub/common/js/mod/jquery&,
&static/common/js/mod/react&: &/staticPub/common/js/mod/react&,
&static/common/components/HelloMessage/HelloMessage.react&: &/staticPub/common/components/HelloMessage/HelloMessage.react&,
&static/helloworld/index&: &/staticPub/helloworld/index&
js文件也被包装成了遵循AMD规范的define形式。下面是demo执行结果：
安装 fis3-hook-cmd 插件， npm install fis3-hook-cmd --save 。 该fis-conf.js配置文件:
/*指定模块化插件*/fis.hook('cmd', {
jquery: '/static/common/js/mod/jquery',
react: '/static/common/js/mod/react'
改index.html模块加载器：
&script type=&text/javascript& src=&/static/common/js/lib/sea.js&&&/script&
异步加载入口index模块改为：
seajs.use(['./index']);//异步加载index.js模块
执行fis3编译：
fis3-release -d ./
注意：运行完成之后你会发现程序无法运行，因为react模块找不到，为什么呢？一般情况下，我们下载的开源框架都自己实现了amd包装，比如react的源码：
/** * React v0.13.0 */(function(f) {
if (typeof exports === &object& && typeof module !== &undefined&) {
module.exports = f()
//注意看这里，这就是默认是用amd
} else if (typeof define === &function& && define.amd) {
define([], f)
if (typeof window !== &undefined&) {
g = window
} else if (typeof global !== &undefined&) {
g = global
} else if (typeof self !== &undefined&) {
g.React = f()
}})(function() {
var define, module,
//这里才是react的内部实现，源码会返回一个React对象
return R});
对于这类框架fis3-hook-amd会识别define.amd并将define([], f)替换成define('static/common/js/mod/react', [], f)，但是我们运行fis3-hook-cmd就无法识别了，所以就无法通过define定义模块，define([], f)不会有任何变化。我们把define.amd改成define.cmd再运行一下fis就会发现了define([], f)变成了define('static/common/js/mod/react', [], f)。
再看看编译之后的产出文件：
#helloworld/index.html&!DOCTYPE html&
&title&繁星网 | 全球最大音乐现场直播平台&/title&
&meta charset=&utf-8&&
&link rel=&stylesheet& type=&text/css& href=&/staticPub/helloworld/index.html_aio.css& /&&/head&
&div id=&helloApp&&&/div&
&script type=&text/javascript& src=&/staticPub/common/js/lib/sea.js&&&/script&
&script type=&text/javascript&&/*resourcemap*/
seajs.config({alias:{
&static/common/js/mod/react&: &/staticPub/common/js/mod/react&,
&static/common/components/HelloMessage/HelloMessage.react&: &/staticPub/common/components/HelloMessage/HelloMessage.react&,
&static/helloworld/index&: &/staticPub/helloworld/index&
// require(['./index']);//异步加载index.js模块
seajs.use(['static/helloworld/index']);//异步加载index.js模块&/script&
&/html&#helloworld/index.jsdefine('static/helloworld/index', ['static/common/js/mod/react', 'static/common/components/HelloMessage/HelloMessage.react'], function(require, exports, module) {
//引入React和HelloMessage模块
var React = require('static/common/js/mod/react');
var HelloMessage = require('static/common/components/HelloMessage/HelloMessage.react');
React.render(
React.createElement(HelloMessage, {message: &I like CMD!&}),
document.getElementById('helloApp')
);});#common/components/HelloMessage/HelloMessage.jsdefine('static/common/components/HelloMessage/HelloMessage.react', ['static/common/js/mod/react'], function(require, exports, module) {
var React = require('static/common/js/mod/react');
var HelloMessage = React.createClass({displayName: &HelloMessage&,
render: function() {
React.createElement(&h1&, null, &Hello, &, this.props.message)
module.exports = HelloM});
再来看看index.html内嵌脚本生成的sourceMap：
seajs.config({alias:{
&static/common/js/mod/react&: &/staticPub/common/js/mod/react&,
&static/common/components/HelloMessage/HelloMessage.react&: &/staticPub/common/components/HelloMessage/HelloMessage.react&,
&static/helloworld/index&: &/staticPub/helloworld/index&
查看结果：
因为工程化，让模块化变得简单，可复用！你不用在乎使用你模块的人是使用commonJS还是seaJS还是requireJS作为模块加载器，你只需要专心开发你的模块，并通过require加载你要依赖的模块即可。怎么样？是不是很爽？那就用起来吧~ 有兴趣的同学可以看一下demo： fis3-mudule-demo
最新教程周点击榜
微信扫一扫}