MorJS web - Web 編譯配置

2024-01-13 23:16 更新
  • 類(lèi)型: object
  • 默認(rèn)值: {}

Web 編譯配置, 僅在 target 值為 web 時(shí)生效。

/* 配置示例 */
{
  web: {
    // 配置小程序組件名映射表
    // 默認(rèn)無(wú)需配置, 可指定全局組件配置文件
    globalComponentsConfig: {},

    // 是否使用 rpx2rem 插件對(duì) rpx 單位進(jìn)行轉(zhuǎn)換
    // 默認(rèn)為 true
    // 優(yōu)先級(jí)低于 usePx
    needRpx: true,

    // 是否需要樣式隔離,如果開(kāi)啟該功能,在編譯時(shí)會(huì)給樣式加上唯一 hash 值,用于多頁(yè)面解決樣式?jīng)_突問(wèn)題
    // 默認(rèn)為 false
    styleScope: false,

    // rpx 方案的 root value。
    // 默認(rèn)是 32
    rpxRootValue: 32,

    // 默認(rèn)編譯出來(lái)的樣式會(huì)以 rem 為單位
    // 優(yōu)先級(jí)高于 needRpx
    // 配合 runtime 層提供的 setRootFontSizeForRem 方法可以實(shí)現(xiàn)移動(dòng)端的響應(yīng)式。
    // 如果不想將樣式單位編譯成 rem 可以配置該對(duì)象,
    // 對(duì)象中包含一個(gè)參數(shù) ratio 用于指定 rpx 2 px 的轉(zhuǎn)換比例。
    // 如 ratio 為 1, 那么 1rpx = 1px, 如果配置 ratio 為 2, 那么 1rpx = 0.5px
    usePx: { ratio: 2 },

    // extensions 配置,用于設(shè)置接口擴(kuò)展
    // 可設(shè)置多個(gè)擴(kuò)展路徑,如 ['extension1', 'extension2', ['extension3', {}]]
    extensions: [],

    // 配置可開(kāi)啟頁(yè)面自動(dòng)響應(yīng)式(以375尺寸為準(zhǔn))
    // 換算方式為 rpxRootValue / usePx.ratio
    // 以上方默認(rèn)值為例, 如需開(kāi)啟響應(yīng)式可配置為: 32 / 2 = 16 即可
    responsiveRootFontSize: undefined,

    // 是否需要在導(dǎo)航欄展示返回按鈕, 默認(rèn)為 false
    // 配置示例:
    //    true: 所有頁(yè)面均開(kāi)啟
    //    false: 所有頁(yè)面均關(guān)閉
    //    []: 可通過(guò)數(shù)組配置具體需要開(kāi)啟的頁(yè)面
    //    (pagePath: string) => boolean: 可通過(guò)函數(shù)來(lái)定制頁(yè)面開(kāi)啟情況
    showBack: false,

    // 是否需要導(dǎo)航欄, 默認(rèn)為 true
    // 配置示例:
    //    true: 所有頁(yè)面均開(kāi)啟
    //    false: 所有頁(yè)面均關(guān)閉
    //    []: 可通過(guò)數(shù)組配置具體需要開(kāi)啟的頁(yè)面
    //    (pagePath: string) => boolean: 可通過(guò)函數(shù)來(lái)定制頁(yè)面開(kāi)啟情況
    showHeader: true,

    // 產(chǎn)物通用路徑
    publicPath: '/',

    // 開(kāi)發(fā)服務(wù)器配置
    // 詳細(xì)配置參見(jiàn): https://webpack.js.org/configuration/dev-server/
    devServer: {},

    // html-webpack-plugin 插件 配置
    // 詳細(xì)配置參見(jiàn): https://webpack.js.org/plugins/html-webpack-plugin/
    // 支持在數(shù)組中配置多個(gè) html 頁(yè)面
    htmlOptions: [],

    // mini-css-extract-plugin 插件配置
    // 詳細(xì)配置參見(jiàn): https://webpack.js.org/plugins/mini-css-extract-plugin/
    miniCssExtractOptions: {},

    // 行內(nèi)資源大小配置, 默認(rèn)為 8k
    inlineAssetLimit: 8192,

    // 是否自動(dòng)生成 entries, 默認(rèn)均開(kāi)啟
    // 如關(guān)閉, 則需要自行指定 webpack 配置的入口文件
    autoGenerateEntries: true,

    // 入口文件配置, 僅在 autoGenerateEntries 為 false 的情況下生效
    // 用于手動(dòng)配置 webpack 入口文件地址
    // 若手動(dòng)配置則需要用戶自行組裝頁(yè)面及引用
    entry: undefined,

    // 是否輸出中間產(chǎn)物
    emitIntermediateAssets: false,

    // 支持用戶自定義運(yùn)行時(shí)的一些行為,該字段將作為 $MOR_APP_CONFIG 寫(xiě)入到 window 對(duì)象中,供運(yùn)行時(shí)獲取并消費(fèi)
    appConfig: {
      // 用于傳遞業(yè)務(wù)對(duì)某個(gè)組件的特殊配置, 比如 map 組件傳遞 key
      components: {},

      // 用于自定義 URL 中 query 部分的 tabBarKey 的實(shí)際名稱,該 key 作用于 URL 的 query
      // 并將拿到到值,用于獲取 app.json 中的 tabbar 內(nèi)容,以此實(shí)現(xiàn)通過(guò) URL 參數(shù)切換不同 tabbar 的功能
      customTabBarKey: 'tabBarKey',

      // 用于配置是否允許覆蓋全局對(duì)象中的方法,默認(rèn)情況下不會(huì)覆蓋 `my.xxx` 方法或?qū)傩?      // 可以通過(guò)配置為 `false` 來(lái)強(qiáng)制覆蓋
      apiNoConflict: true
    }
  }
}


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)