不認(rèn)識FIS3? 那趕緊去看看吧：FIS3 , 為你定制的前端工程構(gòu)建工具, 解決前端開發(fā)中自動化工具、性能優(yōu)化幌氮、模塊化框架崇堵、開發(fā)規(guī)范涤姊、代碼部署堕绩、開發(fā)流程等問題.
和 webpack 的區(qū)別，可以看看這篇文章 前端構(gòu)建工具漫談，fis3、webpack骇塘、rollup.js.
本文主要通過真實項目的一個配置文件，讓你學(xué)會適應(yīng)FIS3.
簡單開始
首先全局安裝fis3韩容，npm install fis3 -g款违。 然后會有一個全局的命令: fis3， 你可以使用fis3 -h查看詳細(xì)命令群凶。
然后插爹，在項目下新建一個配置文件fis-conf.js, 填寫配置信息，最后進(jìn)行發(fā)布fis3 release media-name --clean --watch --file fis-conf.js --root ./请梢。
release 命令相關(guān)參數(shù)信息可以用fis3 release -h查看赠尾。
進(jìn)入正題，詳解配置文件
配置文件是js文件溢陪，非常靈活萍虽，可以充分利用js的屬性靈活配置睛廊。配置文檔詳見：配置.
項目全局配置信息形真，通過fis.set和fis.get設(shè)置和獲取項目配置信息〕可以設(shè)置一些配置咆霜，如系統(tǒng)內(nèi)置屬性 project, namespace, modules, settings等。
各種可配置的屬性見：配置屬性嘶朱，下面列舉幾個蛾坯。
// 作為文本文件而不是二進(jìn)制文件處理的后綴（附加）
fis.set('project.fileType.text', 'po,vue');
// 設(shè)置項目源碼文件過濾器，下面設(shè)置只將src和src-static目錄下的文件當(dāng)作源碼處理疏遏。
fis.set('project.files', ['src/**', 'src-static/**']);
// 排除一些文件
fis.set('project.ignore', fis.get('project.ignore').concat([
'server/**',
'deploy/**',
'node_modules/**',
'public/**',
'DS_store'
]));
編譯&打包流程
FIS3將編譯打包流程拆分成一個個獨(dú)立的步驟脉课，主要分為單文件編譯和打包兩個過程救军，每個過程又有明確的步驟，每個步驟各司其職,分別用不同的插件處理倘零，任務(wù)清晰明確唱遭。
見上圖，單文件編譯過程之后呈驶，F(xiàn)IS3會將所有的文件信息拷泽、配置信息、相互的依賴袖瞻、發(fā)布路徑等信息匯總司致，生成一個資源map(json)。
打包過程能讀取所有的文件信息已經(jīng)相互依賴關(guān)系聋迎，根據(jù)這個json在各類插件中自定義打包流程脂矫。插件編寫見：插件。
在這個流程中的配置中霉晕，最重要的命令是 fis.match 和 fis.plugin.
fis.match用于匹配文件羹唠，fis.plugin用于配置插件。一個文件可以被匹配多次娄昆，添加各種插件佩微，配置十分靈活。
// script/engine 和 script/vendor 下的就是都忽略 commonjs 依賴萌焰，
// 即這些js內(nèi)的require 等將被忽略
fis.match('script/{engine,vendor}/**.js', {
ignoreDependencies: true
});
// 所有js, jsx, vue, vue:js（vue組件中的js片段）, 都作為js文件處理
// 通過babel編譯哺眯，并且使用`es3ify`插件將ES3環(huán)境不支持的關(guān)鍵字等進(jìn)行轉(zhuǎn)換
// 'js-require-css 處理js中的類似require('xxx.css')
// 'js-require-file 處理js中的類似require('xxx.img')
fis.match('**.{js,jsx,vue,vue:js}', {
isMod: true,
useSameNameRequire: true,
rExt: 'js',
parser: [
fis.plugin('babel-6.x', {
presets: ['es2015-loose', 'stage-3']
}),
fis.plugin('es3ify')
],
preprocessor: [
fis.plugin('js-require-css'),
fis.plugin('js-require-file', {
useEmbedWhenSizeLessThan: 10 * 1024 // 小于10k用base64
}),
],
});
// jsx 文件需要react編譯支持，重新設(shè)置parser
fis.match('**.{jsx,js}', {
parser: [
fis.plugin('babel-6.x', {
presets: ['es2015-loose', 'react', 'stage-3']
}),
fis.plugin('es3ify')
],
});
// node_modules里的文件不需要babel編譯扒俯，重新設(shè)置parser
fis.match('node_modules/**.{js,jsx,vue,vue:js}', {
parser: [
fis.plugin('es3ify')
],
});
// vue組件本身配置, 在所有parser前添加插件vue-component
fis.match('**.vue', {
parser: fis.plugin('vue-component', {
cssScopeFlag: 'vuec'
}, 'prepend')
});
// 所有css
fis.match('**.{css,less,vue:less,vue:css}', {
postprocessor: fis.plugin('autoprefixer')
});
// 所有l(wèi)ess文件
fis.match('**.{less,vue:less}', {
rExt: 'css',
parser: fis.plugin('less-2.x', {
//
}),
});
// engine,plugin,shim 下的文件不需要commonjs包裝
fis.match('script/{engine,plugin,shim}/**', {isMod: false});
// page 下的文件不需要commonjs包裝奶卓，即不需要用`define`包裝，直接執(zhí)行
fis.match('script/page/**.{js,jsx}', {isMod: false});
// 不是es6和react模塊的文件撼玄，不需要parser
fis.match('script/{engine,vendor,plugin,shim}/**', {parser: null});
// 打包階段
fis.match('::package', {
// 用 loader 來自動引入資源夺姑。
postpackager: fis.plugin('loader'),
});
fis.match匹配文件使用glob 和 正則混合的模式匹配文件。
fis.plugin加載插件掌猛，F(xiàn)IS3的插件一般都是fis3-parser-xxx或者fis-parser-xxx的npm模塊盏浙。
FIS3支持將模塊進(jìn)行模塊封裝(AMD or CMD等), 并且支持通過npm安裝的模塊
// fis3 commonJs 開發(fā)支持
// https://github.com/fex-team/fis3-hook-commonjs (forwardDeclaration: true)
fis.hook('commonjs', {
extList: [
'.js', '.coffee', '.es6', '.jsx', '.vue'
],
umd2commonjs: true,
ignoreDependencies: [
//
]
});
// 支持npm模塊
fis.unhook('components');
fis.hook('node_modules', {
mergeLevel: 3
});
發(fā)布（release）和媒體（media）。通過
fis.match加release屬性荔茬，可以將任何文件發(fā)布到任何位置废膘。
/ 所有文件發(fā)布到static目錄
fis.match('**', {release: 'static/$&'});
// 視圖文件另外發(fā)布到根目錄
fis.match('view/(**)', {release: '_view/$1'});
fis.match('demo/(**)', {release: 'demo/$1'});
// root 目錄發(fā)布到根文件夾
fis.match('root/(**)', {release: '$1'});
// node_modules下的統(tǒng)一發(fā)布到npm目錄
fis.match('node_modules/(**)', {release: 'static/npm/$1'});
// 所有打包文件
fis.match('/pkg/(**)', {
release: '/static/pkg/$1'
});
通過media屬性，可以靈活地給不同的發(fā)布環(huán)境進(jìn)行差異化配置, 其中
本地環(huán)境對應(yīng)發(fā)布命令fis3 release local
// local: 本地環(huán)境
fis
.media('local')
.match('{src,src-static}/**.{html,js,jsx}', {
preprocessor: fis.plugin('define', {
defines: config['local'].feDefine || {}
}, 'prepend')
})
.match('**.{js,jsx,css,less,svg,ttf,eot,woff,po,vue}', {useHash: true})
.match('::package', {
packager: fis.plugin('deps-pack', {
'pkg/src/pack/npm.js': [
'/src/pack/npm.js:deps',
]
}),
postpackager: fis.plugin('loader', {
allInOne: false,
ignore: [
//
]
}),
})
.match('**', {
deploy: fis.plugin('local-deliver', {
to: path.join(__dirname, './public/')
})
});
// test: 測試環(huán)境
['ut', 'it', 'uat'].forEach(function(env) {
fis
.media(env)
.match('{src,src-static}/**.{html,js,jsx}', {
preprocessor: fis.plugin('define', {
defines: config[env].feDefine || {}
}, 'prepend')
})
.match('**.{js,jsx,css,less,svg,ttf,eot,woff,po,vue,vue:less}', {useHash: true})
.match('src/demo/(**)', {release: false})
.match('*.{js,jsx,po,vue}', {
optimizer: fis.plugin('uglify-js')
})
.match('*.{css,less,styl,vue:less}', {
optimizer: fis.plugin('clean-css')
})
.match('::package', {
packager: fis.plugin('deps-pack', {
'pkg/src/pack/npm.js': [
'/src/pack/npm.js:deps',
]
}),
postpackager: fis.plugin('loader', {
allInOne: true
}),
})
.match('**', {
deploy: fis.plugin('local-deliver', {
to: path.join(__dirname, './public/')
})
});
});
// prod: 正式環(huán)境
fis
.media('prod')
.match('{src,src-static}/**.{html,js,jsx}', {
preprocessor: fis.plugin('define', {
defines: config['prod'].feDefine || {}
}, 'prepend')
})
.match('**.{js,jsx,css,less,svg,ttf,eot,woff,po,vue,vue:less}', {useHash: true})
.match('src/demo/(**)', {release: false})
.match('*.{js,jsx,po,vue}', {
optimizer: fis.plugin('uglify-js')
})
.match('*.{css,less,styl,vue:less}', {
optimizer: fis.plugin('clean-css')
})
.match('*.{css,less,js,jpg,gif,png,ico,mp4,mp3}', {
// cdn 加速
domain: 'http://static.nakedhub.cn'
})
.match('::package', {
packager: fis.plugin('deps-pack', {
'pkg/src/pack/npm.js': [
'/src/pack/npm.js:deps',
]
}),
postpackager: fis.plugin('loader', {
allInOne: true
}),
})
.match('**', {
deploy: fis.plugin('local-deliver', {
to: path.join(__dirname, './public/')
})
});
