序言

Taro的项目配置结合了小程序和webpack进行整合，可以选择React或者Vue进行开发，这里分享几个非常实用的配置，有助于提高开发效率

1. @tarojs/plugin-html插件

支持在Taro项目中使用HTML标签进行组件开发，最主要的一个优势，可以保留开发浏览器页面的习惯，使用<div>来替代<view>。不过有一点需要注意，这个插件会把<span>标签也最终渲染成<view>，原因是小程序里的<Text>标签只能内部嵌套<Text>，如果把<span>标签替换成<Text>则<span>的内部就只能嵌套<span>、<i>、<b>这些行内元素，影响开发体验

{
  plugins: [
    '@tarojs/plugin-html'
  ],
}

2. mini.postcss.cssModules.enable

这个属性值默认是false，如果想使用css的module功能，则需要手动将值设置成true，然后css类的名字就会根据设置的generateScopedName自动生成，默认是[name]__[local]___[hash:base64:5]，后面5位是基于base64生成的随机hash值

{
  mini: {
    postcss: {
      cssModules: {
        enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  }
}

3. designWidth的高级用法

designWidth用来设置设计稿的尺寸，常见的值有750、640、375等，Taro默认会对所有单位进行转换(行内样式需要使用Taro.pxTransform()才能转换)。但是如果遇到比较复杂的情况，比如项目的设计稿是375px，而引入的组件库的标准尺寸是750px该怎么处理？比如后面一篇文章会提到的第三方组件库Taroify，它的设计稿尺寸就是750px

这个时候就可以用函数的形式设置designWidth

{
  designWidth: (input) => {
    // 第三方组件库的设计尺寸是750px
    if (input.file?.replace(/\\+/g, '/').indexOf('@taroify') > -1) {
      return 750;
    }
    // 项目设计稿的标准尺寸375px
    return 375;
  },
  
  // px->rpx的单位换算规则
  deviceRatio: {
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2,
    375: 2 / 1
  },
}

4. @tarojs/plugin-http插件

小程序有一套自己的原生网络请求体系，可以通过Taro.request(option)进行使用，但是为了符合之前的开发习惯，可以通过@tarojs/plugin-http这个插件对axios实例进行封装，方便把之前在浏览器开发项目中封装好的axios配置直接拿过来用，配置请求拦截器、响应拦截器等等

{
  plugins: ['@tarojs/plugin-http'],
}

不过由于真实的执行环境还是在小程序，就会受到部分限制：

• 暂不支持上传，且插件默认会将全局 FormData、Blob对象替换成undefined（仅针对小程序环境）

另外由于这个插件比较新，对Taro的版本有要求

• 需搭配 taro 主包 3.6.0 及其以上版本使用
• webpack4 用户需升级插件版本为 3.6.6 及其以上

后续还会慢慢补充

上述的几个配置基本可以满足平时的开发需求，而且尽可能让大家的开发习惯保持一致，就像开发浏览器页面一样开发小程序，降低了学习成本。如果大家有很推荐的配置也欢迎在评论区分享出来~

按照之前的规划，后面会陆续分享：

• Taro组件库推荐
• Taro自定义组件
• Taro引入第三方工具库的注意问题
• Taro的跨端编译原理
• Taro自定义插件（实战）