Taro mini

2021-09-23 21:05 更新

mini

object

专属于小程序的配置。

mini.compile

object

小程序编译过程的相关配置。

mini.compile.exclude

array

配置小程序编译过程中排除不需要经过 Taro 编译的文件,数组里面可以包含具体文件路径,也可以是判断函数,同 Rule.exclude

假设要排除某个文件,可以配置要排除的文件的具体路径:

  1. module.exports = {
  2. // ...
  3. mini: {
  4. // ...
  5. compile: {
  6. exclude: [
  7. path.resolve(__dirname, '..', 'src/pages/index/vod-wx-sdk-v2.js')
  8. ]
  9. }
  10. }
  11. }

也可以配置判断函数:

  1. module.exports = {
  2. // ...
  3. mini: {
  4. // ...
  5. compile: {
  6. exclude: [
  7. modulePath => modulePath.indexOf('vod-wx-sdk-v2') >= 0
  8. ]
  9. }
  10. }
  11. }

mini.compile.incldue

array

配置额外需要经过 Taro 编译的文件,使用方式与 mini.compile.exclude 一致,同 Rule.include

例如 Taro 默认不编译 node_modules 中的文件,可以通过这个配置让 Taro 编译 node_modules 中的文件。

mini.webpackChain

function

自定义 Webpack 配置。

这个函数会收到三个参数。第一个参数是 webpackChain 对象,可参考 webpack-chain 的 API 进行修改,第二个参数是 webpack 实例,第三个参数 PARSE_AST_TYPE 是小程序编译时的文件类型集合。

第三个参数的取值如下:

  1. export enum PARSE_AST_TYPE {
  2. ENTRY = 'ENTRY',
  3. PAGE = 'PAGE',
  4. COMPONENT = 'COMPONENT',
  5. NORMAL = 'NORMAL',
  6. STATIC = 'STATIC'
  7. }

例子:

  1. // 这是一个添加 raw-loader 的例子,用于在项目中直接引用 md 文件
  2. module.exports = {
  3. // ...
  4. mini: {
  5. // ...
  6. webpackChain (chain, webpack) {
  7. chain.merge({
  8. module: {
  9. rules: {
  10. myloader: {
  11. test: /\.md$/,
  12. use: [{
  13. loader: 'raw-loader',
  14. options: {}
  15. }]
  16. }
  17. }
  18. }
  19. })
  20. }
  21. }
  22. }
  1. // 这是一个添加插件的例子
  2. module.exports = {
  3. // ...
  4. mini: {
  5. // ...
  6. webpackChain (chain, webpack) {
  7. chain.merge({
  8. plugin: {
  9. install: {
  10. plugin: require('npm-install-webpack-plugin'),
  11. args: [{
  12. // Use --save or --save-dev
  13. dev: false,
  14. // Install missing peerDependencies
  15. peerDependencies: true,
  16. // Reduce amount of console logging
  17. quiet: false,
  18. // npm command used inside company, yarn is not supported yet
  19. npm: 'cnpm'
  20. }]
  21. }
  22. }
  23. })
  24. }
  25. }
  26. }

mini.output

object

可用于修改、拓展 Webpack 的 output 选项,配置项参考官方文档

mini.postcss

object

配置 postcss 相关插件。

  1. module.exports = {
  2. // ...
  3. mini: {
  4. // ...
  5. postcss: {
  6. // 可以进行 autoprefixer 的配置。配置项参考官方文档 https://github.com/postcss/autoprefixer
  7. autoprefixer: {
  8. enable: true,
  9. config: {
  10. // autoprefixer 配置项
  11. }
  12. },
  13. pxtransform: {
  14. enable: true,
  15. config: {
  16. // pxtransform 配置项,参考尺寸章节
  17. selectorBlackList: ['body']
  18. }
  19. },
  20. // 小程序端样式引用本地资源内联
  21. url: {
  22. enable: true,
  23. config: {
  24. limit: 10240 // 设定转换尺寸上限
  25. }
  26. },
  27. // css modules 功能开关与相关配置
  28. cssModules: {
  29. enable: false, // 默认为 false,如需使用 css modules 功能,则设为 true
  30. config: {
  31. generateScopedName: '[name]__[local]___[hash:base64:5]'
  32. }
  33. }
  34. }
  35. }
  36. }

mini.commonChunks

array | function

用于告诉 Taro 编译器需要抽取的公共文件,支持两种配置方式。

commonChunks 的配置值必须依据于 webpack 配置 optimization.runtimeChunkoptimization.splitChunks 中的公共 chunks 的名称。Taro 中 webpack.optimization 配置的默认值:源码位置

如果有自行拆分公共文件的需求,请先通过 webpackChain 配置 覆盖optimization.runtimeChunkoptimization.splitChunks 配置。再通过此 commonChunks 配置指定公共入口文件。

字符串数组方式

普通编译时的默认值:['runtime', 'vendors', 'taro', 'common']

编译为微信小程序插件时的默认值: ['plugin/runtime', 'plugin/vendors', 'plugin/taro', 'plugin/common']

可以传入需要抽取的公共文件的名称数组。

例子:

  1. module.exports = {
  2. // ...
  3. mini: {
  4. // ...
  5. commonChunks: ['runtime', 'vendors', 'taro', 'common']
  6. }
  7. }

这几个公共文件分别表示:

  • runtime: webpack 运行时入口
  • taro: node_modules 中 Taro 相关依赖
  • vendors: node_modules 除 Taro 外的公共依赖
  • common: 项目中业务代码公共逻辑

函数方式

通过对入参的默认公共文件数组进行操作,返回新的数组来进行配置,如下

  1. module.exports = {
  2. // ...
  3. mini: {
  4. // ...
  5. commonChunks (commonChunks) {
  6. // commonChunks 的取值即为默认的公共文件名数组
  7. commonChunks.push('yourCustomCommonChunkName')
  8. return commonChunks
  9. }
  10. }
  11. }

mini.addChunkPages

function

为某些页面单独指定需要引用的公共文件。

例如在使用小程序分包的时候,为了减少主包大小,分包的页面希望引入自己的公共文件,而不希望直接放在主包内。那么我们首先可以通过 webpackChain 配置 来单独抽离分包的公共文件,然后通过 mini.addChunkPages 为分包页面配置引入分包的公共文件,其使用方式如下:

mini.addChunkPages 配置为一个函数,接受两个参数

  • pages 参数为 Map 类型,用于为页面添加公共文件
  • pagesNames 参数为当前应用的所有页面标识列表,可以通过打印的方式进行查看页面的标识

例如,为 pages/index/index 页面添加 eatingmorning 两个抽离的公共文件:

  1. module.exports = {
  2. // ...
  3. mini: {
  4. // ...
  5. addChunkPages (pages: Map<string, string[]>, pagesNames: string[]) {
  6. pages.set('pages/index/index', ['eating', 'morning'])
  7. }
  8. }
  9. }

mini.styleLoaderOption

object

style-loader 的附加配置。配置项参考官方文档,例如:

  1. module.exports = {
  2. // ...
  3. mini: {
  4. // ...
  5. styleLoaderOption: {
  6. insertAt: 'top'
  7. }
  8. }
  9. }

mini.cssLoaderOption

object

css-loader 的附加配置。配置项参考官方文档,例如:

  1. module.exports = {
  2. // ...
  3. mini: {
  4. // ...
  5. cssLoaderOption: {
  6. localIdentName: '[hash:base64]'
  7. }
  8. }
  9. }

mini.sassLoaderOption

object

sass-loader 的附加配置。配置项参考官方文档,例如:

  1. module.exports = {
  2. // ...
  3. mini: {
  4. // ...
  5. sassLoaderOption: {
  6. implementation: require("dart-sass")
  7. }
  8. }
  9. }

mini.lessLoaderOption

object

less-loader 的附加配置。配置项参考官方文档,例如:

  1. module.exports = {
  2. // ...
  3. mini: {
  4. // ...
  5. lessLoaderOption: {
  6. strictMath: true,
  7. noIeCompat: true
  8. }
  9. }
  10. }

mini.stylusLoaderOption

object

stylus-loader 的附加配置。配置项参考官方文档

mini.miniCssExtractPluginOption

object

mini-css-extract-plugin 的附加配置,配置项参考官方文档

  1. module.exports = {
  2. // ...
  3. mini: {
  4. // ...
  5. miniCssExtractPluginOption: {
  6. filename: '[name].css',
  7. chunkFilename: '[name].css'
  8. }
  9. }
  10. }

mini.imageUrlLoaderOption

object

针对 png | jpg | jpeg | gif | bpm | svg 文件的 url-loader 配置。配置项参考官方文档

mini.mediaUrlLoaderOption

object

针对 mp4 | webm | ogg | mp3 | wav | flac | aac 文件的 url-loader 配置。配置项参考官方文档,例如:

  1. module.exports = {
  2. // ...
  3. mini: {
  4. // ...
  5. mediaUrlLoaderOption: {
  6. limit: 8192
  7. }
  8. }
  9. }

mini.fontUrlLoaderOption

object

针对 woff | woff2 | eot | ttf | otf 文件的 url-loader 配置。配置项参考官方文档


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号