閱讀(1.3k) 書簽贊(0) 我要糾錯

Taro mini

2021-09-23 21:05 更新

mini

object

專屬于小程序的配置。

mini.compile

object

小程序編譯過程的相關配置。

mini.compile.exclude

array

配置小程序編譯過程中排除不需要經(jīng)過 Taro 編譯的文件，數(shù)組里面可以包含具體文件路徑，也可以是判斷函數(shù)，同 Rule.exclude。

假設要排除某個文件，可以配置要排除的文件的具體路徑：

module.exports = {
  // ...
  mini: {
    // ...
    compile: {
      exclude: [
        path.resolve(__dirname, '..', 'src/pages/index/vod-wx-sdk-v2.js')
      ]
    }
  }
}

也可以配置判斷函數(shù)：

module.exports = {
  // ...
  mini: {
    // ...
    compile: {
      exclude: [
        modulePath => modulePath.indexOf('vod-wx-sdk-v2') >= 0
      ]
    }
  }
}

mini.compile.incldue

array

配置額外需要經(jīng)過 Taro 編譯的文件，使用方式與 mini.compile.exclude 一致，同 Rule.include。

例如 Taro 默認不編譯 node_modules 中的文件，可以通過這個配置讓 Taro 編譯 node_modules 中的文件。

mini.webpackChain

function

自定義 Webpack 配置。

這個函數(shù)會收到三個參數(shù)。第一個參數(shù)是 webpackChain 對象，可參考 webpack-chain 的 API 進行修改，第二個參數(shù)是 webpack 實例，第三個參數(shù) PARSE_AST_TYPE 是小程序編譯時的文件類型集合。

第三個參數(shù)的取值如下：

export enum PARSE_AST_TYPE {
  ENTRY = 'ENTRY',
  PAGE = 'PAGE',
  COMPONENT = 'COMPONENT',
  NORMAL = 'NORMAL',
  STATIC = 'STATIC'
}

例子：

// 這是一個添加 raw-loader 的例子，用于在項目中直接引用 md 文件
module.exports = {
  // ...
  mini: {
    // ...
    webpackChain (chain, webpack) {
      chain.merge({
        module: {
          rules: {
            myloader: {
              test: /\.md$/,
              use: [{
                loader: 'raw-loader',
                options: {}
              }]
            }
          }
        }
      })
    }
  }
}

// 這是一個添加插件的例子
module.exports = {
  // ...
  mini: {
    // ...
    webpackChain (chain, webpack) {
      chain.merge({
        plugin: {
          install: {
            plugin: require('npm-install-webpack-plugin'),
            args: [{
              // Use --save or --save-dev
              dev: false,
              // Install missing peerDependencies
              peerDependencies: true,
              // Reduce amount of console logging
              quiet: false,
              // npm command used inside company, yarn is not supported yet
              npm: 'cnpm'
            }]
          }
        }
      })
    }
  }
}

mini.output

object

可用于修改、拓展 Webpack 的 output 選項，配置項參考官方文檔。

mini.postcss

object

配置 postcss 相關插件。

module.exports = {
  // ...
  mini: {
    // ...
    postcss: {
      // 可以進行 autoprefixer 的配置。配置項參考官方文檔 https://github.com/postcss/autoprefixer
      autoprefixer: {
        enable: true,
        config: {
          // autoprefixer 配置項
        }
      },
      pxtransform: {
        enable: true,
        config: {
          // pxtransform 配置項，參考尺寸章節(jié)
          selectorBlackList: ['body']
        }
      },
      // 小程序端樣式引用本地資源內(nèi)聯(lián)
      url: {
        enable: true,
        config: {
          limit: 10240 // 設定轉換尺寸上限
        }
      },
      // css modules 功能開關與相關配置
      cssModules: {
        enable: false, // 默認為 false，如需使用 css modules 功能，則設為 true
        config: {
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  }
}

mini.commonChunks

array | function

用于告訴 Taro 編譯器需要抽取的公共文件，支持兩種配置方式。

commonChunks 的配置值必須依據(jù)于 webpack 配置 optimization.runtimeChunk 和 optimization.splitChunks 中的公共 chunks 的名稱。Taro 中 webpack.optimization 配置的默認值：源碼位置。

如果有自行拆分公共文件的需求，請先通過 webpackChain 配置覆蓋optimization.runtimeChunk 與 optimization.splitChunks 配置。再通過此 commonChunks 配置指定公共入口文件。

字符串數(shù)組方式

普通編譯時的默認值：['runtime', 'vendors', 'taro', 'common']

編譯為微信小程序插件時的默認值： ['plugin/runtime', 'plugin/vendors', 'plugin/taro', 'plugin/common']

可以傳入需要抽取的公共文件的名稱數(shù)組。

例子：

module.exports = {
  // ...
  mini: {
    // ...
    commonChunks: ['runtime', 'vendors', 'taro', 'common']
  }
}

這幾個公共文件分別表示：

runtime: webpack 運行時入口
taro: node_modules 中 Taro 相關依賴
vendors: node_modules 除 Taro 外的公共依賴
common: 項目中業(yè)務代碼公共邏輯

函數(shù)方式

通過對入?yún)⒌哪J公共文件數(shù)組進行操作，返回新的數(shù)組來進行配置，如下

module.exports = {
  // ...
  mini: {
    // ...
    commonChunks (commonChunks) {
      // commonChunks 的取值即為默認的公共文件名數(shù)組
      commonChunks.push('yourCustomCommonChunkName')
      return commonChunks
    }
  }
}

mini.addChunkPages

function

為某些頁面單獨指定需要引用的公共文件。

例如在使用小程序分包的時候，為了減少主包大小，分包的頁面希望引入自己的公共文件，而不希望直接放在主包內(nèi)。那么我們首先可以通過 webpackChain 配置來單獨抽離分包的公共文件，然后通過 mini.addChunkPages 為分包頁面配置引入分包的公共文件，其使用方式如下：

mini.addChunkPages 配置為一個函數(shù)，接受兩個參數(shù)

pages 參數(shù)為 Map 類型，用于為頁面添加公共文件
pagesNames 參數(shù)為當前應用的所有頁面標識列表，可以通過打印的方式進行查看頁面的標識

例如，為 pages/index/index 頁面添加 eating 和 morning 兩個抽離的公共文件：

module.exports = {
  // ...
  mini: {
    // ...
    addChunkPages (pages: Map<string, string[]>, pagesNames: string[]) {
      pages.set('pages/index/index', ['eating', 'morning'])
    }
  }
}

mini.styleLoaderOption

object

style-loader 的附加配置。配置項參考官方文檔，例如：

module.exports = {
  // ...
  mini: {
    // ...
    styleLoaderOption: {
      insertAt: 'top'
    }
  }
}

mini.cssLoaderOption

object

css-loader 的附加配置。配置項參考官方文檔，例如：

module.exports = {
  // ...
  mini: {
    // ...
    cssLoaderOption: {
      localIdentName: '[hash:base64]'
    }
  }
}

mini.sassLoaderOption

object

sass-loader 的附加配置。配置項參考官方文檔，例如：

module.exports = {
  // ...
  mini: {
    // ...
    sassLoaderOption: {
      implementation: require("dart-sass")
    }
  }
}

mini.lessLoaderOption

object

less-loader 的附加配置。配置項參考官方文檔，例如：

module.exports = {
  // ...
  mini: {
    // ...
    lessLoaderOption: {
      strictMath: true,
      noIeCompat: true
    }
  }
}

mini.stylusLoaderOption

object

stylus-loader 的附加配置。配置項參考官方文檔。

mini.miniCssExtractPluginOption

object

mini-css-extract-plugin 的附加配置，配置項參考官方文檔。

module.exports = {
  // ...
  mini: {
    // ...
    miniCssExtractPluginOption: {
      filename: '[name].css',
      chunkFilename: '[name].css'
    }
  }
}

mini.imageUrlLoaderOption

object

針對 png | jpg | jpeg | gif | bpm | svg 文件的 url-loader 配置。配置項參考官方文檔。

mini.mediaUrlLoaderOption

object

針對 mp4 | webm | ogg | mp3 | wav | flac | aac 文件的 url-loader 配置。配置項參考官方文檔，例如：

module.exports = {
  // ...
  mini: {
    // ...
    mediaUrlLoaderOption: {
      limit: 8192
    }
  }
}

mini.fontUrlLoaderOption

object

針對 woff | woff2 | eot | ttf | otf 文件的 url-loader 配置。配置項參考官方文檔。

以上內(nèi)容是否對您有幫助：

← Taro sass

Taro h5 →

寫筆記

我要補充