從配置文件帶你認(rèn)識FIS3

不認(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è)置和獲取項目配置信息?？梢栽O(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/')
    })
  });
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 前端集成解決方案要求： 模塊化開發(fā)。最好能像寫nodejs一樣寫js，很舒服。css最好也能來個模塊化管理！ 性能...
    Www劉閱讀 3,241評論 1贊 20
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,699評論 19贊 139
  • Spring Boot 參考指南 介紹 轉(zhuǎn)載自:https://www.gitbook.com/book/qbgb...
    毛宇鵬閱讀 47,290評論 6贊 342
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,351評論 25贊 708
  • 今天讀完了《僧侶與哲學(xué)家》四五章，雖然一直被教導(dǎo)讀書要帶著線索去讀，也就是說每本書想要解決的問題。但是我讀書依舊是...
    假行僧0201閱讀 1,063評論 0贊 50

友情鏈接更多精彩內(nèi)容