fis3前端工程構建配置入門教程

時間 2019-11-18

標籤 fis3 fis 前端工程構建配置入門教程简体版

原文原文鏈接

壹 ❀ 引css

fis3是百度推出的一款前端工程構建工具，相似的還有webpack，gulp等工具；不管你們有沒有使用過，從事前端行業應該都略知一二了，因此對於此類工具用幹嗎的我這裏就不作重複了。html

其實對於這類構建工具，大部分人是不感興趣，或者說有些畏懼的，配置多賊麻煩，沒法像js同樣調試很恐怖，給人感受很難；特別是fis3這種相對比較冷門的構建工具，出現問題百度一圈相關答案真的不多...前端

我也曾抱怨公司爲啥不用webpack，但我畢竟不是抉擇者，已經決定了使用這個還不如沉下心去學習瞭解；本文會抽出我以爲經常使用的，好用的配置，並經過個人理解來加以描述，必定能看得懂，我也會在文章結尾貼上個人項目配置，但願看完基本教程你能看懂，那麼本文開始。node

貳 ❀ 簡單配置入門(不難，耐心點看)jquery

fis3編譯流程都是經過配置完成的，咱們的配置等於告訴fis3工具應該按怎樣的規則編譯咱們的項目，這裏說下必用的配置API：webpack

1.fis.set(key,value)css3

此方法提供了多種key字段，不一樣的key做用不一樣，這裏只說下key爲'project.files'的做用，它能幫咱們過濾文件夾。web

一個項目文件夾那麼多，確定有一些文件咱們並不但願fis3幫咱們編譯，好比三方庫node_modules這樣，舉個例子：npm

fis.set('project.files', ['commonLess/**', 'components/**', 'modules/**', 'pages/**']);

這段代碼的意思是，我但願fis3後續配置只對commonLess，components等文件夾下的全部文件起做用，沒添加的文件夾都被過濾掉了，因此這個方法請寫在配置的第一行，你能夠點擊這裏查看完整的key說明。gulp

2.fis.hook()

此方法能啓用模塊化開發，爲js文件提供模塊化開發的支持；咱們能夠下載fis3提供的插件並利用hook方法啓用模塊化，fis3提供了三種模塊插件。

我司選擇了commonjs規範，這個須要配合mod.js一塊兒使用，先下載fis3提供的fis3-hook-commonjs插件(mod.js這裏就不說怎麼用了)

npm install fis3-hook-commonjs

在fis3配置表中添加以下配置就啓用了commonjs規範：

fis.hook('commonjs');

固然單hook還不夠，咱們還沒指定哪些文件使用此規範，這個須要下面的match方法指定；這行代碼也請加在fis3配置文件頭部位置，先啓用模塊化，後面再指定哪些文件使用模塊化。

2.fis.match(selector, props)

selector：表示匹配路徑，你但願哪一個路徑下的文件被編譯處理，就將此路徑寫在這裏，這是fis3提供的匹配語法：

* 匹配0或多個除了 / 之外的字符

? 匹配單個除了 / 之外的字符

** 匹配多個字符包括 /

{} 可讓多個規則用 , 逗號分隔，起到或者的做用

! 出如今規則的開頭，表示取反。即匹配不命中後面規則的文件

props：編譯規則，你但願前面你選擇的路徑下的文件被怎麼編譯，這個規則就寫在這裏。

fis3大部分配置都是經過match方法實現的，這段請耐心點看：

fis3建議路徑都是以/開頭，/表明根目錄，舉個例子：

fis.match('a.js', {});

這段代碼表示匹配整個項目中的全部a.js文件，包括/a.js /a/a.js /a/b/a.js

但若是咱們加了斜線，意義就不一樣了：

fis.match('/a.js', {});

此時表示，只匹配根目錄下的a.js，並不會匹配全部路徑下的a.js。

除此以外，/a/*.js表示只匹配/a目錄下全部的js文件，不包含/a目錄下子目錄中的js，不過咱們能夠經過這種寫法/a/**.js達到此目的。

說完match匹配路徑的規則，簡單說下match的props屬性，注意，全部的屬性都包裹在一個{}中，這裏就主要說下經常使用的幾個：

release：設置文件的產出路徑

咱們按路徑匹配了一些文件，通過某些編譯以後輸出到哪裏，這個產出就是由release決定的，例如：

fis.match('*.{png,js,css}', {
  release: '/static/$0'
});

這段代碼的意思是，匹配整個項目中全部的png，js，css類型的文件，並輸出到根目錄下的static文件中；

$0表示match方法的整個selector字段，就像一個變量，匹配到什麼，$0就表明什麼，那麼在這裏的意思就是按照文件原名輸出到static目錄下。

順帶一體，除了$0還有一個$1也很經常使用，舉個例子：

fis.match('/pages/**/(*.html)', {
    release: '/$1'
});

這段代碼的意思是，將pages目錄下全部html文件按文件原名輸出到根目錄下，前面說了/表明根目錄。此時$1表明(*.html)這一段匹配的全部字段，也就是文件名了。若是是$0就表明/pages/**/(*.html) 這一段，應該不難理解。

isMod：是否啓用模塊化

前面咱們經過fis.hook()方法調用了模塊化插件，如今就能夠利用isMod屬性指定哪些文件模塊化，好比：

fis.match('*.js', {
    isMod: true,
    release: '/static/$0'
});

這段代碼的意思是，匹配全部的js文件，模塊化，而且輸出到根目錄下static文件中，並按原名顯示。

useHash：文件是否添加md5戳

這個作http緩存會用，給文件添加md5戳便於客戶端主動感知文件變化，若是對於http緩存感興趣，能夠閱讀博客這邊文章---http緩存詳解，http緩存推薦方案

fis.match('*.css', {
    useHash: true
});

這段代碼的意思是，匹配全部的css文件，在編譯時所有添加md5戳。

rExt：設置文件編譯後的產出後綴

說直白點，改變文件發佈後的文件後綴，好比less,sass文件轉義後咱們但願是css格式，那麼就能夠這樣：

fis.match('*.{less,sass}', {
    rExt: '.css'
});

packTo：設置文件合併後的輸出路徑與文件

這個屬性是合併文件用的，好比我一個頁面用了三個js文件，我想合併成一個js文件，就能夠利用這個屬性，舉個例子：

fis.match('/index/**.js', {
    packTo: '/static/pkg_index.js'
});

這段配置的意思是，找到根目錄下index文件下全部js文件，合併發佈到根目錄下static文件下的pkg_index.js文件中。

id：指定文件的資源id

這麼解釋可能看不懂，直接上個例子：

fis.match('/static/jquery.js', {
    id: 'jquery',
    isMod: true
});
// 引用文件時
var $ = require('jquery');

咱們將根目錄下的static文件夾中的jquery.js文件的id設置成了jquery字段，在引用時直接require id設置的字段就能夠了，若是不設置，咱們require就是這樣：

var $ = require('/static/jquery.js');

因此id的做用就像指定了一個字段做爲key去保存一段複雜的路徑，這樣作的好處是在require時能更加簡單。

其它match屬性暫時沒用到，點擊這裏能夠查看完整的match屬性

叄 ❀ 關於發佈命令

知道了基本的配置，就要經過發佈指令，將咱們的項目按照配置發佈出去，這裏簡單說下發布指令，很簡單：

fis3 release -d <path>

<path>表明任意發佈路徑

fis3 release -d ./output

fis3 release -d ../dist

fis3 release -d D:\output

發佈到D盤下的output目錄下

除此以外，咱們還能在發佈指令目錄後添加屬性，好比：

fis3 release -d D:\output -w

-w啓用文件監聽功能，發佈後此命令不會退出，而是一直顯示。

fis3 release -d D:\output -wL

-L通常與w一塊兒使用，監聽文件變化，只要修改任何東西，都會自動刷新頁面

fis3 release -d D:\output -wLc

-c表示每次發佈清除編譯緩存

關於發佈指令path與match屬性release的區別

不知道你們會不會把match release屬性指定輸出路徑和發佈指令中指定輸出路徑弄混；實際開發中，發佈指令的path決定的是大格局，整個項目要發佈到哪，而match release的路徑每每是基於項目路徑後決定個別文件發佈到哪，這是有區別的。

肆 ❀ 經常使用插件與配置

前面聊的入門的配置規則與發佈命令其實只是爲了讓你看懂下面這些配置，拷貝到配置中進行發佈，若是提示缺乏插件，請對應下載對應插件便可：

1.轉義全部less文件，併爲css3屬性添加瀏覽器兼容前綴，若是有sass作法也同樣，請下載對應插件：

fis.match('*.less', {
    rExt: '.css',
    parser: fis.plugin('less-2.x', {

    })
}).match('*.{css,less,scss}', {
    preprocessor: fis.plugin('autoprefixer', {
        "browsers": ["Android >= 2.1", "iOS >= 4", "ie >= 8", "firefox >= 15"],
        "cascade": true
    })
});

2.壓縮js與css文件，須要下載對應插件

fis.media('prod').match("**.js", {
    //壓縮js
    optimizer: fis.plugin('uglify-js')
});
fis.match('**.{css,less}', {
    //壓縮css
    optimizer: fis.plugin('clean-css')
});

3.單頁面零散資源合併，這個在生產環境須要使用

好比將index頁面的全部js合併成一個js，全部css文件合併成一個css，也須要下載插件

fis.match('::package', {
    postpackager: fis.plugin('loader', {
        //單頁面合併零散資源
        allInOne: true
    })
});

4.爲css，js添加md5戳，http緩存必備

fis.match('*.{js,css}', {
    //爲js，css類型文件添加md5戳
    useHash: true
})

5.爲全部圖片添加md5戳

fis.match('::image', {
    //爲全部的圖片類型添加md5戳
    useHash: true
});

伍 ❀ 個人前端項目完整配置

// 過濾文件，只有數組中的目錄纔會被fis3編譯
fis.set('project.files', ['bootstrap/**', 'commonLess/**', 'components/**', 'modules/**', 'pages/**', 'partials/**']);

//啓用relative插件,全部文件使用相對路徑
fis.hook('relative')
    .match('**', {
        relative: true
    });

// commonJS規範
fis.hook('commonjs');

//將pages下全部html按原文件名發佈至根目錄
fis.match('/pages/**/(*.html)', {
    release: '/$1',
    isMod: true,
});

//爲js文件啓用模塊化
fis.match('{modules,pages,partials,components}/(**.js)', {
    isMod: true
});

//less轉義css,並添加瀏覽器前綴
fis.match('**/*.less', {
    rExt: '.css',
    parser: fis.plugin('less-2.x', {

    })
}).match('*.{css,less,scss}', {
    preprocessor: fis.plugin('autoprefixer', {
        "browsers": ["Android >= 2.1", "iOS >= 4", "ie >= 8", "firefox >= 15"],
        "cascade": true
    })
});

//使用postcss，並使用pxtoviewport插件
var pxtoviewport = require('postcss-px-to-viewport');
fis.match('*.{css,less,scss}', {
    postprocessor: fis.plugin('postcss', {
        processConfig: {},
        plugins: [pxtoviewport],
        sourceMap: true,
        sourceMapRelative: false
    })
});

fis.match('::packager', {
    postpackager: fis.plugin('loader', {
        resourceType: 'mod',
        useInlineMap: true // 資源映射表內嵌
    })
});


//生產環境配置，相比測試環境，多了代碼合併壓縮，添加時間戳等操做。
fis.media('prod').match("**.js", {
        //壓縮js
        optimizer: fis.plugin('uglify-js')
    }).match('**.{css,less}', {
        //壓縮css
        optimizer: fis.plugin('clean-css')
    }).match('::package', {
        postpackager: fis.plugin('loader', {
            //單頁面合併零散資源
            allInOne: true
        })
    }).match('*.{js,css}', {
        //爲js，css類型文件添加md5戳
        useHash: true
    })
    .match('::image', {
        //爲全部的圖片類型添加md5戳
        useHash: true
    });